Question

我正在使用camendesign的VIDEO FOR EVERYBODY脚本在我的网页上嵌入一个视频元素，并为那些没有HTML5功能的人提供Flash播放器备忘录。

但我正在更改调用页面时要动态加载的URL。除了object embed params标签中的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>

Answer 1

您只是在写出HTML属性。这里不需要JavaScript。 URI用Java编码字符串并将它们放在Java变量中，然后将它们放在HTML中，就像使用任何其他Java变量一样：

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

Answer 2

好哇！

<!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函数和document.write放到需要动态参数行的地方，并且SHAZAM！像魅力一样工作。

将Javascript变量插入到flashVars字符串中

2 个答案: