update flashVars of flowplayer to change video via swfObject

Question

I am using a cross browser solution to play .mp4 video files. I have to support IE8 and onwards. I am using the solution mentioned here at Dev-Metal. I have configured everything successfully and it is working.

However my requirements involve changing the video being played dynamically using javascript/jQuery. I have done that successfully for HTML5 video tag; but i am having trouble with flash player. I am new to flash integration.

Here is my html code:

<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>

I have searched the SO for different solutions. I am now trying to use the swfObject. I have tried playing with that but i just don't understand how to update the flashVars property as it is taking an object.

Here is my 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);

Please help me in this regard.

Answer 1

FlashVars are not meant to be updated post-embed. If you need to send new data after the SWF is already embedded, you'll need to use External Interface.

Since you're using FlowPlayer, you should stick to their API. It provides a method for dynamically loading video via JavaScript.

Answer 2

I was able to change both the HTML 5 video using jQuery and fallback flash video using the SWFObject. I am providing below the simple javascript functions i have created for this purpose.

The sample call is also provided.Just pass it the id where you want to create the video tag, video url, poster/image url, and dimensions; it will configure everything.

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