Javascript – MediaElement.js – Flash Video Wont Play Until Fully Loaded

flashjavascriptm4vvideovideo streaming

I'm having an issue will MediaElement.js (my flash video player) not playing my .m4V video files (encoded using ffmpeg) until the video is fully loaded.

I have tested this with various third party video files that appear to play straight away before they have completely loaded. Only my files do not 🙁

When played using the html5 video solution they play straight away, just not on the flash fallback.

Could this be to do with the settings the video is being encoded at? I don't see any other reason.

CODE:

<video id="player1" src='BriefTour.m4v' type="video/mp4" preload="none"></video>

<script>
var videoPlayer = MediaElement('player1',{
  success:function(me){me.play();}              
});
</script>

As you can see I am specifying no option, the player is on default settings.

Hope someone has encoutered this before and can help me out!

Best Answer

As you are encoding your own videos and using FFmpeg, I suggest using 'qt-faststart'.

This is a useful tool included with FFmpeg that rearranges a file with H.264 video, "such that the moov atom is in front of the data, thus facilitating network streaming". Basically, it allows web movies to start playing before they are completely downloaded.

Enable it with the following the ffmpeg directory:

cd ~/ffmpeg
make tools/qt-faststart

Usage (after your ffmpeg encoding):

qt-faststart input.foo output.foo

This should allow your player to play the video while it is still downloading.

Related Solutions

Mediaelement.js Flash Fallback not working

Managed to get it to work by using the following code:

HTML:

<video id="player1" width="100%" height="100%" controls="controls">
    <!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
    <source type="video/mp4" src="PATH_TO_VIDEO.mp4" />
    <object width="1024" height="576" type="application/x-shockwave-flash" data="PATH_TO_flashmediaelement.swf">
       <param name="movie" value="PATH_TO_flashmediaelement.swf">
       <param name="flashvars" value="controls=true&amp;file=PATH_TO_VIDEO.mp4">
    </object>
</video>

JS:

    jQuery(document).ready(function(){        

        // THE MOST HATED PIECE OF CODE IN THE WORLD.
        jQuery('video').mediaelementplayer({
            success: function(player, node) {

            // STARTS THE VIDEO IF IT'S FLASH VIDEO FALLBACK.
            jQuery('.mejs-overlay-button').trigger('click');

            // STARTS THE VIDEO IF IT'S HTML5 COMPATIBLE.
            player.play();
            }
        });

        // FADES IN TITLES.
        jQuery(".enter_logo").delay(2200).animate({opacity:1},2000);
        jQuery(".enter_button").delay(6000).animate({opacity:0.4},2000);

    });

Best Answer

Related Solutions

Mediaelement.js Flash Fallback not working

Related Topic