11 Replies Latest reply: Jun 7, 2012 7:33 AM by Silviu Vergoti RSS

    JavaScript video 'Ended' Event?

    drewraymondbaker-98y3YI Community Member

      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!

        • 1. Re: JavaScript video 'Ended' Event?
          drewraymondbaker-98y3YI Community Member

          I'm not sure if this is the right way to do it, but I figured out how to listern for events.

           

          When you embed your Flash file using swfobject.js, make sure you set the javascriptCallbackFunction flashvar. The demos make this confusing by calling it a param, but it's actually a Flashvar.

           

          var flashvars = {};
              flashvars.src = 'http://osmf.org/dev/videos/cathy1_HD.mp4';
              flashvars.poster = 'http://www.google.com/intl/en_ALL/images/srpr/logo1w.png';
              flashvars.javascriptCallbackFunction = 'onJavaScriptBridgeCreated';
              flashvars.controlBarAutoHide = false;
          
          var params = {};
              params.allowFullScreen = 'true';
          
          var attributes = {};
              attributes.id = 'strobeMediaPlaybackId';
              attributes.styleclass = 'smp-video-player';
              attributes.name = 'strobeMediaPlaybackId';
          
          
          swfobject.embedSWF('/flash/StrobeMediaPlayback.swf', 'no-flash-content', '100%', '100%', '10.1.0', '{}', flashvars, params,attributes);
          


          Then in your JavaScript file you need to setup the callback function:

           

          function onJavaScriptBridgeCreated(playerId)
          {
              var player = document.getElementById(playerId);
              player.addEventListener("complete", "completeFunc");
          }
          

           

          The above JS code will get feed the 'playerID' from Flash. The 'addEventListener' takes 2 arguments. The first is the event to listen for, the second is the JS function to run when the event is detected.

           

          For demo's sake, set your completeFunc to be this:

           

          function completeFunc() {
              console.log('Complete!')
          }
          

           

          Now when the player reachs the end of the video, the console will log 'Complete!'.

           

          You can see all the events by looking in the Flash source files. Look for the file 'src/player/StrobeMediaPlayback/src/org/osmf/player/configuration/JavaScriptBridge.as'. At version 1.5.1 they start around line 262.

           

          Now I just need to figure out the following:

          1. How to set a new source file to play on click and on end'
          2. If it's possible to have all events bubble, rather than having to set an event listerner for each indervidual event as shown above

           

          Thanks for the help.

          • 2. Re: JavaScript video 'Ended' Event?
            sergiodaroca Community Member

            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.xml&#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.xml&#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?

            • 3. Re: JavaScript video 'Ended' Event?
              drewraymondbaker-98y3YI Community Member

              I'm not sure if this will work without SWFobject.

               

              What does your console.log('id') retrun? Is the playerID coming in as 'player61? I doubt it.

               

               

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

              • 4. Re: JavaScript video 'Ended' Event?
                sergiodaroca Community Member

                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 !

                • 5. Re: JavaScript video 'Ended' Event?
                  drewraymondbaker-98y3YI Community Member

                  I gave up on Strobe at 1.5 becuase of the bad JavaScript API documentation (someone tell me how to set a new source?!).

                   

                  So, in v1.6 what events are listed in /StrobeMediaPlayback/src/org/osmf/player/configuration/JavaScriptBridge.as? Is complete in there?

                   

                  -Drew

                  • 6. Re: JavaScript video 'Ended' Event?
                    sergiodaroca Community Member

                    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.

                    • 7. Re: JavaScript video 'Ended' Event?
                      drewraymondbaker-98y3YI Community Member

                      So the compete event is in there, I'm not sure why your function has stopped working then. I would try it without the player == foo test just to be sure.

                       

                      I ended up using OVP, but it's terrible too. If you are building this for use on just one site, and you don't mind a cheap liecnse fee, then JW Player or Flowplayer are a million times better built and documented. Both have fully working JS API's and are very easy to use.

                       

                      Strobe is the best bet for a white label Flash Player that is free. Hopefully they can get the JavaScript API up to speeed and get some proper documentation or examples built out sometime soon.

                       

                      -Drew

                      • 8. Re: JavaScript video 'Ended' Event?
                        sergiodaroca Community Member

                        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

                        • 9. Re: JavaScript video 'Ended' Event?
                          sergiodaroca Community Member

                          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 !

                          • 10. Re: JavaScript video 'Ended' Event?
                            Maximilian the Max Community Member

                            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>

                            • 11. Re: JavaScript video 'Ended' Event?
                              Silviu Vergoti Adobe Employee

                              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?