Question

I have a video embed using the following code:

<video controls='false' preload='true' 
        onplay='doPlayEvent()' 
        onpause='doPauseEvent()'
        onended='doEndEvent()';
        src='/the_video.mp4' 
        id='VideoID'>
    <source type='video/mp4' src='/the_video.mp4'></source>
    <source type='video/ogg' src='/the_video.ogg'></source>
    <source type='video/webm' src='/the_video.webm'></source>
</video>

Some strange behavior is that FireFox is playing the flash fallback AND more importantly the onplay, pause and ended events are not firing in FF or IE8 (I assume anything using flash).

Does anyone know what I’m missing to enable the events in flash?

Answer 1

For the onplay, onpause etc, to work in the flash fallback you need to add the event listeners into the JavaScript where you create the MediaElement e.g.

mediaElement = new MediaElementPlayer('video',{
    //options etc

    // method that fires when the Flash or Silverlight object is ready
    success: function (mediaElement, domObject) {   

       // add event listeners
       mediaElement.addEventListener('timeupdate', function(e) {
           onVideoTimeUpdate(e);
       }, false);

       mediaElement.addEventListener('pause', function(e) {
           onVideoPaused(e);
       }, false);

       mediaElement.addEventListener('play', function(e) {
           onVideoPlayed(e);
       }, false);

       //etc
   }