Javascript 更新flowplayer的flashVars以通过swfObject更改视频

我正在使用跨浏览器解决方案来播放.mp4视频文件。我必须支持IE8及以后的版本。我正在使用这里提到的解决方案。我已经成功地配置了所有内容，并且正在运行

但是，我的要求涉及使用javascript/jQuery动态更改正在播放的视频。 我已经为HTML5视频标签成功地做到了这一点；但我在使用flash player时遇到了问题。我是flash集成的新手

以下是我的html代码：

<video id="introPageVideoPlayer" controls="controls" poster="../script/videoplayer/img/demo.jpg" width="978" height="348">

<!-- .mp4 file for native playback in IE9+, Firefox, Chrome, Safari and most mobile browsers -->
<source src="../script/videoplayer/vid/demo.mp4" type="video/mp4" />

<!-- flash fallback for IE6, IE7, IE8 and Opera -->
<object type="application/x-shockwave-flash"
    data="../script/videoplayer/swf/flowplayer-3.2.18.swf" width="978" height="348">

    <param name="movie" value="../script/videoplayer/swf/flowplayer-3.2.18.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />

    <!-- note the encoded path to the image and video files, relative to the .swf! -->
    <param name="flashVars" value="config={'playlist':[ '..%2Fscript%2Fvideoplayer%2Fimg%2Fdemo.jpg',
                                                    {'url':'..%2Fscript%2Fvideoplayer%2Fvid%2Fdemo.mp4','autoPlay':false}
                                                  ]}" />

    <!-- fallback image if flash fails -->
    <a href="http://get.adobe.com/flashplayer/">
        <img src="../script/videoplayer/img/noFlashPlayer.png" width="978" height="348" title="No Flash found" />
    </a>
</object>

---

请在这方面帮助我。

FlashVar不打算在嵌入后更新。如果在SWF已经嵌入之后需要发送新数据，则需要使用

---

因为您使用的是FlowPlayer，所以应该坚持使用它们的API。它提供了一个。

我能够使用jQuery更改HTML5视频，并使用SWFObject更改回退闪存视频。我在下面提供了为此目的创建的简单javascript函数

还提供了示例调用。只需将要创建视频标签、视频url、海报/图像url和维度的id传递给它；它将配置一切

//Sample Call:  createVideoPlayer('VideoContainer', '../video/Sample.mp4', 640, 480)
function createVideoPlayer(videoContainerId, completeVideoUrl, posterPath, width, height) {

var videoPlayerId = videoContainerId + 'VideoPlayer';
var flashPlayerId = videoContainerId + 'FlashPlayer';   //this id will be use by SWFObject


//create new video tag and replace old html
$('#' + videoContainerId).html(
    '<video preload="none" width="' + width + '" height="' + height + '" controls="controls" id="' + videoPlayerId + '" + poster="' + posterPath + '" >'
    '<source src="' + completeVideoUrl + '" type="video/mp4"></source>' +

    '<div id="' + flashPlayerId + '" class="flashPlayer">' +
    '<object type="application/x-shockwave-flash" data="../videoplayer/swf/flowplayer-3.2.18.swf" width="' + width + '" height="' + height + '">' +
    '<param name="movie" value="../videoplayer/swf/flowplayer-3.2.18.swf" />' +
    '<param name="allowFullScreen" value="true" />' +
    '<param name="wmode" value="transparent" />' +
    '<param name="flashVars" value=\'config={"playlist":[ "' + encodeURI(posterPath) + '",{"url":"' + encodeURI(completeVideoUrl) + '","autoPlay":false}]}\' />' +

    '<a href="http://get.adobe.com/flashplayer/"> <img src="../videoplayer/img/noFlashPlayer.png" width="' + width + '" height="' + height + '" title="No Flash found" /></a>' +
    '</object>' +
    '</div>' +
    '</video>'
);

//set flash video using SWFObject
setFlashVideo(completeVideoUrl, posterPath, flashPlayerId, width, height);
}


function setFlashVideo(completeVideoPath, completePosterImagePath, flashPlayerContainerId, width, height) {

//Change the parameters using the swfObject
var flashvars = {};

flashvars.config = "{'playlist':[ '" + encodeUrl(completePosterImagePath) + "',{'url':'" + encodeUrl(completeVideoPath) + "','autoPlay':false}]}";

var params = {
    wmode: "transparent",
    allowfullscreen: true
};

var attributes = null;

//embed flash
swfobject.embedSWF(
    "../videoplayer/swf/flowplayer-3.2.18.swf",
    flashPlayerContainerId,
    width, height,
    "9.0.0",
    null,
    flashvars, params, attributes
);
}

function encodeUrl(url) {
return encodeURIComponent(url).replace(/'/g, "%27").replace(/"/g, "%22");
}

//示例调用：createVideoPlayer（'VideoContainer'，'../video/Sample.mp4'，640，480）
函数createVideoPlayer（videoContainerId、completeVideoUrl、posterPath、宽度、高度）{
var videoPlayerId=videoContainerId+“VideoPlayer”；
var flashPlayerId=videoContainerId+'FlashPlayer'；//此id将由SWFObject使用
//创建新的视频标签并替换旧的html
$（'#'+videoContainerId）.html(
''
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
'' +
''
);
//使用SWFObject设置flash视频
setFlashVideo（completeVideoUrl、posterPath、flashPlayerId、宽度、高度）；
}
功能设置FlashVideo（完整视频路径、完整视频路径、flashPlayerContainerId、宽度、高度）{
//使用swfObject更改参数
var flashvars={}；
flashvars.config=“{'playlist'：['”+encodeUrl（completePosterImagePath）+'，{'url'：'“+encodeUrl（completeVideoPath）+'，'autoPlay'：false}]}”；
变量参数={
wmode：“透明”，
allowfullscreen：真
};
var属性=null；
//嵌入闪存
swfobject.embeddeswf(
“./videoplayer/swf/flowplayer-3.2.18.swf”，
flashPlayerContainerId，
宽度，高度，
"9.0.0",
无效的
flashvars、参数、属性
);
}
函数编码url（url）{
返回encodeURIComponent（url）.replace（/“/g，”%27”）.replace（/“/g，”%22”）；
}

//Sample Call:  createVideoPlayer('VideoContainer', '../video/Sample.mp4', 640, 480)
function createVideoPlayer(videoContainerId, completeVideoUrl, posterPath, width, height) {

var videoPlayerId = videoContainerId + 'VideoPlayer';
var flashPlayerId = videoContainerId + 'FlashPlayer';   //this id will be use by SWFObject


//create new video tag and replace old html
$('#' + videoContainerId).html(
    '<video preload="none" width="' + width + '" height="' + height + '" controls="controls" id="' + videoPlayerId + '" + poster="' + posterPath + '" >'
    '<source src="' + completeVideoUrl + '" type="video/mp4"></source>' +

    '<div id="' + flashPlayerId + '" class="flashPlayer">' +
    '<object type="application/x-shockwave-flash" data="../videoplayer/swf/flowplayer-3.2.18.swf" width="' + width + '" height="' + height + '">' +
    '<param name="movie" value="../videoplayer/swf/flowplayer-3.2.18.swf" />' +
    '<param name="allowFullScreen" value="true" />' +
    '<param name="wmode" value="transparent" />' +
    '<param name="flashVars" value=\'config={"playlist":[ "' + encodeURI(posterPath) + '",{"url":"' + encodeURI(completeVideoUrl) + '","autoPlay":false}]}\' />' +

    '<a href="http://get.adobe.com/flashplayer/"> <img src="../videoplayer/img/noFlashPlayer.png" width="' + width + '" height="' + height + '" title="No Flash found" /></a>' +
    '</object>' +
    '</div>' +
    '</video>'
);

//set flash video using SWFObject
setFlashVideo(completeVideoUrl, posterPath, flashPlayerId, width, height);
}


function setFlashVideo(completeVideoPath, completePosterImagePath, flashPlayerContainerId, width, height) {

//Change the parameters using the swfObject
var flashvars = {};

flashvars.config = "{'playlist':[ '" + encodeUrl(completePosterImagePath) + "',{'url':'" + encodeUrl(completeVideoPath) + "','autoPlay':false}]}";

var params = {
    wmode: "transparent",
    allowfullscreen: true
};

var attributes = null;

//embed flash
swfobject.embedSWF(
    "../videoplayer/swf/flowplayer-3.2.18.swf",
    flashPlayerContainerId,
    width, height,
    "9.0.0",
    null,
    flashvars, params, attributes
);
}

function encodeUrl(url) {
return encodeURIComponent(url).replace(/'/g, "%27").replace(/"/g, "%22");
}