将Javascript变量插入flashVars字符串

问题描述：

我使用camendesign的VIDEO FOR EVERYBODY脚本在我的页面上嵌入视频元素，并为那些没有HTML5功能的用户设置Flash播放器回退。将Javascript变量插入flashVars字符串

但我正在改变网页被调用时动态加载的网址。除了对象嵌入参数标记中的flashVars字符串外，所有内容都可以正常解析。此params标签的值需要为URL编码，因此我在页面上呈现视频之前有一点javascript，以便使用加载的值对海报图像和视频文件的url进行编码。

我的问题是：我如何正确解析出两个值，以便他们正确地完成flashVars值？

这里是我的代码：（因此，这是我运行一个Java站点，因此JAVA C：套）

<!DOCTYPE HTML> 
<c:set var="title" value="Blender Demo Reel 2013"/> 
<c:set var="file" value="bdr2013"/> 
<c:set var="poster" value="poster.jpg"/> 
<c:set var="width" value="960"/> 
<c:set var="height" value="540"/> 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>New Video Player</title> 
</head> 

<script> 
    var posterEncode = encodeURIComponent("${poster}"); 
    var fileEncode = encodeURIComponent("${file}"); 
</script> 

<body> 

<div id="videoContainer"> 
    <video controls preload poster="${poster}" width="${width}" height="${height}"> 
     <source src="${file}.mp4" type="video/mp4"> 
     <source src="${file}.ogv" type="video/ogg"> 
     <source src="${file}.webm" type="video/webm"> 
     <object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="${width}" height="${height}"> 
      <param name="movie" value="http://player.longtailvideo.com/player.swf" /> 
      <param name="allowFullScreen" value="true" /> 
      <param name="wmode" value="transparent" /> 
      <param name="flashVars" value="controlbar=over&amp;image="+posterEncode+"&amp;file="+fileEncode+".mp4" /> 
      <img alt="Big Buck Bunny" src="${poster}" width="${width}" height="${height}" title="No video playback capabilities, please download the video below" /> 
     </object> 
    </video> 
</div> 

</body> 
</html>

的源代码，当我在浏览器中查看该回来为这样的：

<script> 
    var posterEncode = encodeURIComponent("poster.jpg"); 
    var fileEncode = encodeURIComponent("bdr2013"); 
</script> 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>New Video Player</title> 
<body> 

<div id="videoContainer"> 
    <video controls preload poster="poster.jpg" width="960" height="540"> 
     <source src="bdr2013.mp4" type="video/mp4"> 
     <source src="bdr2013.ogv" type="video/ogg"> 
     <source src="bdr2013.webm" type="video/webm"> 
     <object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="960" height="540"> 
      <param name="movie" value="http://player.longtailvideo.com/player.swf" /> 
      <param name="allowFullScreen" value="true" /> 
      <param name="wmode" value="transparent" /> 
      <param name="flashVars" value="controlbar=over&amp;image="+posterEncode+"&amp;file="+fileEncode+".mp4" /> 
      <img alt="Big Buck Bunny" src="poster.jpg" width="960" height="540" title="No video playback capabilities, please download the video below" /> 
     </object> 
    </video> 
</div> 

</body> 
</html>

为什么不在服务器端使用Java中的'poster'和'file'进行URI编码呢？ – 2014-11-21 17:41:29

但我是否仍然需要将这些变量插入到flashVars字符串中？这就是我在上述问题中所要求的。 – Murphy1976 2014-11-21 17:45:48

答

你只是写出HTML属性。这里不需要JavaScript。 URI编码Java中的字符串，并把它们在Java中的变量，然后把它们在你的HTML就像你做其他任何Java变量：

<param name="flashVars" value="controlbar=over&amp;image=${posterEncoded}&amp;file=${fileEncoded}.mp4" />

但是，然后我需要第二组视频源标签的变量，不是吗？ – Murphy1976 2014-11-21 18:37:15

我不确定你在问什么，但是更大的答案是：如果你只需要将值写入HTML标记一次，那么在服务器端执行。如果您需要在浏览器中动态更改值以响应用户操作，则可能需要JavaScript，否则只需在Java中执行。 – 2014-11-21 18:50:33

我期待做的是调用所有数据一次，对其进行编码（如果需要），然后将其插入需要去的地方。视频源src值和flashvars文件值之间的差异在于flashVars值需要URL编码，而视频源src值则不是。因此，如果有方法可以将此页面上的所有数据都带上，那么将其放在需要的地方，然后以一次需要的格式为理想。 – Murphy1976 2014-11-21 18:54:16

答

好哇！

<!DOCTYPE HTML> 
<c:set var="title" value="Blender Demo Reel 2013"/> 
<c:set var="file" value="bdr2013"/> 
<c:set var="poster" value="poster.jpg"/> 
<c:set var="width" value="960"/> 
<c:set var="height" value="540"/> 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>New Video Player</title> 
</head> 

<body> 

<div id="videoContainer"> 
    <video controls preload poster="${poster}" width="${width}" height="${height}"> 
     <source src="${file}.mp4" type="video/mp4"> 
     <source src="${file}.ogv" type="video/ogg"> 
     <source src="${file}.webm" type="video/webm"> 
     <object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="${width}" height="${height}"> 
      <param name="movie" value="http://player.longtailvideo.com/player.swf" /> 
      <param name="allowFullScreen" value="true" /> 
      <param name="wmode" value="transparent" /> 
      <script> 
       var posterEncode = encodeURIComponent("${poster}"); 
       var fileEncode = encodeURIComponent("${file}"); 
       document.write("<param name='flashVars' value='controlbar=over&amp;image="+posterEncode+"&amp;file="+fileEncode+".mp4' />"); 
      </script> 
      <img alt="${title}" src="${poster}" width="${width}" height="${height}" title="${title}" /> 
     </object> 
    </video> 
</div> 

</body> 
</html>

我扔的JavaScript encodeURIComponent函数和文件撰写成，我需要动态PARAM线要和快变！像魅力一样工作。

将Javascript变量插入flashVars字符串

相关推荐