將Javascript變量插入flashVars字符串

Question

我正在使用camenedesign的VIDEO FOR EVERYBODY腳本在頁面上嵌入視頻元素，並對那些沒有HTML5功能的用戶使用Flash Player后備。

但是我正在更改要在調用頁面時動態加載的URL。 除對象embed params標記中的flashVars字符串外，所有內容都可以正常解析。 此params標記的值需要進行URL編碼，因此在將視頻呈現在頁面上之前，我需要一些JavaScript才能使用加載的值對海報圖像和視頻文件的url進行編碼。

我的問題是：如何正確解析兩個值，以便它們正確完成flashVars值？

這是我的代碼：（因此，這是我正在運行的Java網站，因此是JAVA c：sets）

<!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 個解決方案

解決方案1
0 2014-11-21 18:06:13

解決方案2
0 2014-11-21 19:08:09

將Javascript變量插入flashVars字符串

問題描述

2 個解決方案

解決方案1 0 2014-11-21 18:06:13

解決方案2 0 2014-11-21 19:08:09

解決方案1
0 2014-11-21 18:06:13

解決方案2
0 2014-11-21 19:08:09