更新flashVars流媒體更改通過swfObject視頻

我正在使用跨瀏覽器解決方案播放.mp4視頻文件。我必須支持IE8及之後的版本。我正在使用這裏提到的解決方案Dev-Metal。我已經成功配置了一切，它正在工作。更新flashVars流媒體更改通過swfObject視頻

但是，我的要求涉及更改動態播放的視頻使用javascript/jQuery。我已經成功完成了HTML5視頻標籤;但我在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);

請幫我在這方面。

來源

2015-06-10 SufianRashid

FlashVars並不意味着在嵌入後更新。如果您在SWF已經嵌入後需要發送新數據，則需要使用External Interface。

由於您使用的是FlowPlayer，因此應該堅持使用它們的API。它提供了一個method for dynamically loading video via JavaScript。

來源

2015-06-10 23:23:04 pipwerks

我能夠使用jQuery和後備Flash視頻使用SWFObject更改HTML 5視頻。我在下面提供了我爲此創建的簡單JavaScript函數。

還提供了示例調用。只需將它傳遞給您要創建視頻標記，視頻網址，海報/圖片網址和尺寸的標識;它會配置一切。

//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"); 
}

來源

2015-07-27 12:01:40 SufianRashid

更新flashVars流媒體更改通過swfObject視頻

回答

相關問題