обновление flashVars flowplayer для изменения видео через swfObject

Question

Я использую кросс-браузерное решение для воспроизведения видеофайлов .mp4. Я должен поддерживать IE8 и далее. Я использую решение, упомянутое здесь, в Dev-Metal. Я настроил все успешно и работает.

Однако мои требования включают в себя изменение динамического воспроизведения видео, используя 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> 

Я искал С.О. для различных решений. Теперь я пытаюсь использовать 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

Я смог изменить как видео HTML 5 с помощью jQuery, так и резервного флэш-видео с помощью SWFObject. Я предоставляю ниже простые функции javascript, которые я создал для этой цели.

Образец вызова также предоставляется. Просто передайте ему идентификатор, где вы хотите создать тег видео, URL-адрес видео, плакат/URL-адрес изображения и размеры; он будет настраивать все.

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