javascript - MediaElement.js - Flash Video Wont Play Until Fully Loaded

Question

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!

Answer 1

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.