Skip navigation
Currently Being Moderated

JavaScript video 'Ended' Event?

Feb 14, 2011 4:35 PM

Hello SMP Team,

I'm trying to pleace my current OVP based player with Strobe (I love the skinning features!).

 

I'm trying to figure out the JavaScript event that get fired when a video has ended?

 

Is there anyway to have the play log all the events? So far I have only figured out how to log the ready states using the following code:

 

        function onJavaScriptBridgeCreated(playerId)
        {
            player = document.getElementById(playerId);
            var state = player.getState();
            console.log(state)
                      
        }

 

 

I'm not sure if this is all ready implmented or set for a planed release, but ideally these events could be accessed using jQuery's .bind() function.

 

Thanks for the help!

 
Replies
  • Currently Being Moderated
    Apr 1, 2011 6:30 AM   in reply to drewraymondbaker-98y3YI

    Hi all !

    I tried the tip above without using swfobject, and it doesn work for me.

    I'm using the StrobeMediaPlayback_1.6.238M-full version, checked the events code as posted above, and it seems correct, and though all functions get called, the event doesn fire.

    You can check it at: http://www.danielcuberta.com/v2/

     

    This is the embed code for the player, as generated by the demo configurator (wrapped for readability):

     

    <object id="player61" width="440" height="394">
    <param name="movie" value="http://www.danielcuberta.com/v2/strobe/StrobeMediaPlayback.swf"></param>
    <param name="flashvars" value="
    javascriptCallbackFunction=onJavaScriptBridgeCreated&#038;
    src=http%3A%2F%2Fwww.danielcuberta.com%2Fvideos%2Fvideos%2Finicio.flv& #038;
    skin=http%3A%2F%2Fwww.danielcuberta.com%2Fv2%2Fstrobe%2Fskin%2Fskin.xm l&#038;
    autoPlay=true&#038;
    controlBarAutoHideTimeout=1"></param>
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param><param name="wmode" value="direct"></param>
    <embed src="http://www.danielcuberta.com/v2/strobe/StrobeMediaPlayback.swf" name="player61" type="application/x-shockwave-flash"
    allowscriptaccess="always" allowfullscreen="true" wmode="direct" width="440" height="394"
    flashvars="javascriptCallbackFunction=onJavaScriptBridgeCreated&#038;
    src=http%3A%2F%2Fwww.danielcuberta.com%2Fvideos%2Fvideos%2Finicio.flv& #038;
    skin=http%3A%2F%2Fwww.danielcuberta.com%2Fv2%2Fstrobe%2Fskin%2Fskin.xm l&#038;
    autoPlay=true&#038;
    controlBarAutoHideTimeout=1"></embed>
    </object>

     

     

    And this my javascript:

     

     

    player='foo'; function completeFunc() {     console.log('Video Complete!'); } function onJavaScriptBridgeCreated(id) {      console.log(id);      if (player == 'foo'){ //to attach the listener only once           player = document.getElementById(id);           console.log(player);           player.addEventListener("complete", "completeFunc");      }     }

     

    Any hint?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2011 1:19 PM   in reply to drewraymondbaker-98y3YI

    Hi again !

    Actually yes, it's player61. You may see it now in firebug's console.

    I had to finish posting and go out really quick before and couldn't clean the code and leave the logs on.

    I modified the configurator to output a random id just in case many videos have to be embedded in the same page. I'll have to use some time-date function to obtain unique ids later on.

     

    This is the output right now:

     

     

    player61
    <object id="player61" width="440" height="394">
    player61
    player61
    player61
         .
         .
         .
    (and so on till the video ends)
     
    

     

     

    I'm gonna keep trying to solve this, Thanks for your quick reply !

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2011 2:18 PM   in reply to drewraymondbaker-98y3YI

    This is part of the relevant code, I think,

     

                   initializeEventMap();               
    
                   
    
                   // We are ready, notify the javascript client.
    
                   
    
                   mediaPlayer.addEventListener(MediaPlayerStateChangeEvent.MEDIA_PLAYER_STATE_CHANGE, onMediaPlayerStateChange);
    
                   mediaPlayer.addEventListener(AudioEvent.MUTED_CHANGE, onVolumeChange);
    
                   mediaPlayer.addEventListener(AudioEvent.VOLUME_CHANGE, onVolumeChange);
    
                   mediaPlayer.addEventListener(TimeEvent.DURATION_CHANGE, onDurationChange);
    
                   mediaPlayer.addEventListener(TimeEvent.CURRENT_TIME_CHANGE, onCurrentTimeChange);
    
                   mediaPlayer.addEventListener(TimeEvent.COMPLETE, onComplete);
    
                   mediaPlayer.addEventListener(SeekEvent.SEEKING_CHANGE, onSeekingChange);
    
                   mediaPlayer.addEventListener(LoadEvent.BYTES_LOADED_CHANGE, onBytesLoadedChange);
    
                   mediaPlayer.addEventListener(DisplayObjectEvent.MEDIA_SIZE_CHANGE, onMediaSizeChange);
    
                   
    
                   exposeProperty(strobeMediaPlayback.configuration, "src", false);
    
                   exposeProperty(strobeMediaPlayback, "error", true);
    
                   ExternalInterface.addCallback("setCurrentTime", mediaPlayer.seek);
    
                   ExternalInterface.addCallback("play2", mediaPlayer.play);
    
                   ExternalInterface.addCallback("stop2", mediaPlayer.stop);
    
                   ExternalInterface.addCallback("load", load);
    
                   call([javascriptCallbackFunction, ExternalInterface.objectID, "onJavaScriptBridgeCreated"], false);
    
                   
    
    //               var javascriptObjectName:String = "javascriptObjectName";
    
    //               call(["$javascriptObjectName.triggerHandler('loadstart')", ExternalInterface.objectID]);
    
    //               call(["$javascriptObjectName.trigger('timeupdate')", ExternalInterface.objectID]);
    
    //               call(["$javascriptObjectName.triggerHandler('loadstart')", ExternalInterface.objectID]);
    

     

    I'm hanging the file in: http://www.danielcuberta.com/v2/wp-content/JavaScriptBridge.as

     

    Did you find any other good player out there?

    I like this one quite much. The skining configuration is great and simple, and though examples are a bit complex, they are quite full featured. If only we can solve this "simple" things.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 1, 2011 3:17 PM   in reply to drewraymondbaker-98y3YI

    Hi Drew !

    I tried your suggestion and it's all the same now the output is:

     

    player61
    player61
    player61

    ...

     

    I might be testing to see if it works using swfobject, or if there is a newer version up for download.

     

    If nothing works I might be trying this next: http://videojs.com/

     

    Well, I'm finished for today. I'll come back as I get ahead with it.

    Thanks for all the feedback !

     

    -Sergio

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 4, 2011 6:33 AM   in reply to sergiodaroca

    Hi again !

    Just to let know that it worked fine by embedding the player with swfobject.

    Ok by now for the intro video to the site, but if I need to capture end events on all videos to track stats, it aint gonna be easy !

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 6:07 AM   in reply to sergiodaroca

    Currently working on the HTML5 Fallback Video.

    From the <video> i can catch the "complete" events w/o problems. I do need the fired Events also from the SWF. via the OSMF.

     

    I do have the swfobject.js, the video plays perfectly.

    I do even get call for the       function onJavaScriptBridgeCreated(playerId) . In the Console.log.

    But i cannot assign an EventListener to the Object.

    My Log for the console.log(player);  == the SWF.Object  // looks fine for me

     

     

      function onJavaScriptBridgeCreated(playerId)

        {

            console.log("Bridge OK")  // fires while video is playing.

     

     

                if (player == 'foo'){

                    player = document.getElementById(playerId);

                    console.log(player);   // i do get log. output

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

                   alert("Peter") // it doesnt fire.

                }

     

        };

     

     

     

        function completeFunc() {

            console.log('Complete!');

            alert("COMPLETE")

        };

     

    /////////////////////////

     

     

    <div id="Fl_videoDiv">

            <video width="400"

                   height="300"

                   controls="controls"

                   id="html5Video"

                   poster="media/image.jpg">

                <source src="media/video.mp4" type="video/mp4"/>

                <source src="media/video.theora.ogv" type="video/ogg"/>

     

     

                Error! No detection!

     

     

            </video>

        </div>

     

     

     

    <script type="text/javascript">

     

     

     

     

        var flashvars = {};

        flashvars.src = "video.mp4";

        flashvars.controlBarMode = "floating";

        flashvars.poster = "xxxx.jpg";

        flashvars.javascriptCallbackFunction = 'onJavaScriptBridgeCreated';

        flashvars.controlBarAutoHide = false;

     

     

        var params = {};

        params.allowfullscreen = "true";

        params.allowscriptaccess = "always";

     

     

        var attributes = {};

        attributes.id = 'Fl_videoDiv';

        attributes.name = 'Fl_videoDiv';

        swfobject.embedSWF("http://myDomain.com/media/StrobeMediaPlayback.swf", "Fl_videoDiv", "400", "300", "10.1.0", "expressInstall.swf", flashvars, params, attributes);

     

     

        var ticker = 0;

        var running;

     

     

        var video = document.getElementById('html5Video');

        var player='foo';

     

     

        //CALLBACK EXTERNAL INTERFACE VON DER SWF

     

     

        function onJavaScriptBridgeCreated(playerId)

        {

            console.log("Bridge OK")

     

     

                if (player == 'foo'){

                    player = document.getElementById(playerId);

                    console.log(player);

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

                   alert("Peter")

                }

     

     

     

     

     

     

     

     

        };

     

     

     

     

     

     

        function completeFunc() {

            console.log('Complete!');

            alert("COMPLETE")

        };

     

     

     

     

        video.addEventListener('ended', function () {

     

     

            $('#clock_output').append("(" + "ENDE" + ");");

            this.ticker = 0;

            window.clearInterval(running);

            $("#slider").slider("disable")

     

     

        }, false)

     

     

        video.addEventListener('play', function () {

     

     

            $('#slider').show();

     

     

        })

        video.muted = true;

        alert("OI")

     

     

        $(function () {

     

     

            $("#slider").hide();

     

     

            $('#slider').slider({

                range:"min",

                value:50,

                min:0,

                max:100,

                animate:true,

                step:5,

                slide:function (event, ui) {

                    $("#wert").val(ui.value);

                },

                start:function (event, ui) {

                    startTick();

     

     

                },

     

     

                stop:function (event, ui) {

     

     

                    var newVal = ui.value;

     

     

                    $('#clock_output').append("(" + ticker + "," + newVal + "," + "mo" + ");");

     

     

                }

            });

     

     

     

     

        });

     

     

        function startTick() {

     

     

            running = window.setInterval("tick()", 1000);

        }

     

     

     

     

        function tick() {

     

     

            ticker++

        }

     

     

        function tickerstop() {

            /*

             $('#clock_output').append("(" + "ENDE" + ");");

             this.ticker = 0;

             window.clearInterval(running);

             $("#slider").slider("disable")

             */

     

     

        }

     

     

     

     

    </script>

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 7, 2012 7:33 AM   in reply to Maximilian the Max

    Hi,

     

    it might be an issue related to not sending the complete event on video complete.

     

    Do you use OSMG 2.0?

     

    Can you receive other events? like the updating of the current time?

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points