Question

我正在使用跨浏览器解决方案来播放.mp4视频文件。我必须支持IE8及其后续版本。我正在Dev-Metal使用此处提到的解决方案。我已经成功配置了一切，它正在运行。

但是我的要求涉及使用 javascript / jQuery 动态更改正在播放的视频。我已成功完成HTML5视频标签;但是我遇到了flash播放器的麻烦。我是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>

我在SO搜索了不同的解决方案。我现在正在尝试使用swfObject。我试过玩这个但是我只是不明白如何更新flashVars属性，因为它正在拍摄一个物体。

这是我的javascript：

var flashvars = {};
        flashvars.??? = "SampleVideo.mp4";
        var params = {};
        params.allowfullscreen = "true";
        var attributes = {};
        swfobject.embedSWF("flowplayer-3.2.18.swf", "flashContainer", "800", "600", "9.0.0", false, flashvars, params, attributes);

请帮助我。

Answer 1

FlashVars不应在嵌入后更新。如果您需要在嵌入SWF后发送新数据，则需要使用External Interface。

由于您使用的是FlowPlayer，因此您应该坚持使用它们的API。它提供了method for dynamically loading video via JavaScript。

Answer 2

我能够使用SWFObject使用jQuery和后备flash视频更改HTML 5视频。我在下面提供了为此目的创建的简单javascript函数。

还提供了示例调用。只需传递您要创建视频标记，视频网址，海报/图像网址和尺寸的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");
}

通过swfObject

2 个答案: