Mediaelement.js - Flash Video不会播放直到完全加载

Question

我有一个问题将MediaElement.js（我的Flash Video Player）未播放我的.m4v视频文件（使用ffmpeg编码），直到视频是完全加载。

我已经用各种第三方视频文件测试了这一点，在完全加载之前直接播放。只有我的文件没有:(

在使用HTML5视频解决方案播放时，他们直接播放，直到不在闪存的回归上。

这可能会在设置视频被编码的设置吗？我没有看到任何其他原因。

代码：

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

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

.

您可以看到我指定没有选项，播放器位于默认设置上。

希望有人在此之前遭到筛选，可以帮助我！

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.

Answer 2

Flash can't always play MP4s if they are not indexed in the way it wants.

To fix your file, just download this: QTIndexSwapper

Answer 3

I tried qt-faststart with my own MP4 (h264+AAC) encoded files and was always getting an "last atom in file was not a moov atom" error message (and no output file). I was then assuming my files were ok and searched for the problem elsewere. After hours of testing, my assumption proved to be wrong - indeed, it seems my files had no moov-atom at all, not at the beginning nor at the end!

To succesfully fix this I used ffmpeg first to "regenerate" the file - that is, remux the original h264+AAC tracks into a new MP4 file without reencoding it:

ffmpeg -i souce_file.mp4 -acodec copy -vcodec copy target_file_1.mp4

After this, the new file should have its proper moov-atom at the end. So now you can use qt-faststart in order to move it to the beginning, as Kit explained in his answer:

qt-faststart target_file_1.mp4 target_file_2.mp4

After doing that, mediaelement plays all my videos just right after clicking on the play button, when the file starts downloading! :)

If your problem is you already have all your files in a youtube-like site, your hosting is Linux-based, ffmpeg is not there and you cannot compile it on your own, you my find it useful getting a static build of ffmpeg. You can find that here:

http://ffmpeg.gusari.org/static/ (32 bit) or here: http://dl.dropbox.com/u/24633983/ffmpeg/index.html (64 bit)

Unfortunately, on the 32-bit build I used there was no qt-faststart, not as binary nor as source code. In this case you can download it from ffmpeg SVN and compile it directly with gcc. I did it succesfully in my ultra-el-cheapo shared hosting. It doesn't seem to have any build dependencies. Or you can even try my own qt-faststart binary build and see if it works for you.

EDIT: I've just discovered that in newer versions there's no need for qt-faststart at all. You can encode directly with ffmpeg using the following option:

-movflags +faststart 

Answer 4

I wanted to expand a little on John Dyer's comment and say that using QTIndexSwapper isn't just for the Flash fallback / fallfoward functionality of MediaElement.js but also works for the non-Flash player.

The problem I had was in the non-Flash player my .mp4 file was having to load the full video before it'd start playing (I didn't check the Flash version until after I had it working without Flash) and QTIndexSwapper solved the problem.

I wanted to point this out as when I first read the comment I thought it applied only to Flash and didn't try it straight away. Not that I'm taking anything away from John Dyer as it was his comment which solved my problem in the end, I just wanted to add to it so hopefully others won't make my mistake.

If anyone is interested I wrote a blog post about this problem and about a PHP class which should fix it too.