Strobe Media Playback (OSMF) events

StackOverflow https://stackoverflow.com/questions/14731315

Question

Does someone know if Strobe Media Playback (OSMF) has events like:

  1. Streaming is ended
  2. Streaming is started
  3. Streaming error

in order to access it via JavaScript?

I have tried this but no joy.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Strobe Media Playback</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
    <script type="text/javascript">         

        // Create a StrobeMediaPlayback configuration 
        // http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv
        // http://osmf.org/dev/1.6-sprint-2/hello-world-jquery-plugin.html#
        var parameters =
            {
                src: "http://stream.flowplayer.org/bauhaus/624x260.mp4"
            ,   autoPlay: true
            ,   controlBarAutoHide: false
            ,   javascriptCallbackFunction: "onJavaScriptBridgeCreated"
            };

        // Embed the player SWF:            
        swfobject.embedSWF
            ( "StrobeMediaPlayback.swf"
            , "strobeMediaPlayback"
            , 640
            , 480
            , "10.1.0"
            , {}
            , parameters
            , { allowFullScreen: "true"}
            , { name: "strobeMediaPlayback" }
            );

        function completeFunc(time, playerId) {
            //var player = document.getElementById(playerId);
            alert("!!!");
        }

        function onCurrentTimeChange(time, playerId)
        {
            document.getElementById("currentTime").innerHTML = time;        
        }

        function onDurationChange(time, playerId)
        {
            document.getElementById("duration").innerHTML = time;   
        }       
        var player = null;
        function onJavaScriptBridgeCreated(playerId)
        {
            if (player == null) {
                player = document.getElementById(playerId);

                // Add event listeners that will update the 
                player.addEventListener("currentTimeChange", "onCurrentTimeChange");
                player.addEventListener("durationChange", "onDurationChange");

                player.addEventListener("complete", "completeFunc");

                // Pause/Resume the playback when we click the Play/Pause link
                document.getElementById("play-pause").onclick = function(){
                    var state = player.getState();
                    if (state == "ready" || state == "paused") {
                        player.play2();
                    }
                    else 
                        if (state == "playing") {
                            player.pause();
                        }
                    return false;
                };
            }
        }
    </script>   
  </head>
  <body>
    <div>
        <div>
            <span id="currentTime" /> ... </span> : <span id="duration" /> ... </span>
        </div>   
        <a href="#" id="play-pause">Play/Pause</div>  
    </div>
    <div id="strobeMediaPlayback">
      <p>Alternative content</p>
    </div>
  </body>
</html>

Thanks!

P.S. As I can see here we can use STATE variable to detect the end of the video. So in the end of the video it goes to "PAUSED". Can we use it in this manner?

UPDATE:

I found that onJavaScriptBridgeCreated method doesn't triggering. The same happens with all examples of SMP.

Any clue?

Was it helpful?

Solution

there it is.

function changeVidSrc(url, posterUrl, id, width, height, autoplay) {

var flashvars =
{
    src: url,
    autoPlay: autoplay,
    controlBarAutoHide: true,
    poster: posterUrl,
    skin: 'skinPath', //i just needed skin, remove if not needed
    javascriptCallbackFunction: "onJavaScriptBridgeCreated"

};

var parameters = { allowFullScreen: "true"};

var attributes = { name: id };

// Embed the player SWF:
    swfobject.embedSWF
        ('/swfs/StrobeMediaPlayback.swf',
            id, width, height,
            "10.1.0",
            '',
            flashvars,
            parameters,
            attributes
        );

}

Some important details:
1. i couldn't let it debug with firebug correctly. i can't understand behaviour.
2. passing name in attributes object is important for FF. otherwise callback triggers, but no events handled
i would also advise to put global var player and handler functions on top.

OTHER TIPS

Streaming is ended:

var onJavaScriptBridgeCreated = function (event) {
    if (event === ''onJavaScriptBridgeCreated'') {
        var player = document.getElementById('the id of the object tag');
        var callback = function(event){console.log(event);};
        //stopped
        player.addEventListener("complete", "callback");
        //started
        player.addEventListener("playStateChange", "callback");
        //error
        player.addEventListener("mediaError", "callback");
    }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top