Strobe Media Playback (OSMF) events

Question

Strobe Media Playback (OSMF) events

6.3k Views Asked by NoWar At 05 April 2025 at 06:15

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

Streaming is ended
Streaming is started
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?

Original Q&A

There are 2 best solutions below

user2342460 On 09 September 2015 at 03:30

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

**sab** · Accepted Answer

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.

Strobe Media Playback (OSMF) events

There are 2 best solutions below

Related Questions in EVENTS

Related Questions in ADOBE

Related Questions in OSMF

Related Questions in STROBE-MEDIA-PLAYBACK

Trending Questions

Popular # Hahtags

Popular Questions