MediaElement.js - Flash 视频在完全加载之前不会播放
我遇到的问题是,在视频完全加载之前,MediaElement.js(我的 Flash 视频播放器)无法播放我的 .m4V 视频文件(使用 ffmpeg 编码)。
我已经用各种第三方视频文件对此进行了测试,这些文件在完全加载之前似乎可以立即播放。只有我的文件不会:(
当使用 html5 视频解决方案播放时,它们会立即播放,只是不会在 Flash 回退中播放。
这可能与视频编码的设置有关吗?我没有看到任何其他原因。
代码:
<video id="player1" src='BriefTour.m4v' type="video/mp4" preload="none"></video>
<script>
var videoPlayer = MediaElement('player1',{
success:function(me){me.play();}
});
</script>
正如你所看到的,我没有指定任何选项,播放器处于默认设置,
希望有人以前遇到过这个问题并可以帮助我!
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!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
当您编码自己的视频并使用 FFmpeg 时,我建议使用“qt-faststart”。
这是 FFmpeg 附带的一个有用的工具,可以重新排列 H.264 视频文件,“使 moov 原子位于数据前面,从而促进网络流传输”。基本上,它允许网络电影在完全下载之前开始播放。
使用以下 ffmpeg 目录启用它:
用法(在 ffmpeg 编码之后):
这应该允许您的播放器在视频仍在下载时播放视频。
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:
Usage (after your ffmpeg encoding):
This should allow your player to play the video while it is still downloading.
如果 MP4 未按其想要的方式建立索引,Flash 就无法始终播放 MP4。
要修复您的文件,只需下载:QTIndexSwapper
Flash can't always play MP4s if they are not indexed in the way it wants.
To fix your file, just download this: QTIndexSwapper
我尝试使用我自己的 MP4 (h264+AAC) 编码文件进行 qt-faststart,并且总是收到“文件中的最后一个原子不是 moov 原子”错误消息(并且没有输出文件)。然后我假设我的文件没问题并搜索其他问题。经过几个小时的测试,我的假设被证明是错误的 - 事实上,似乎我的文件根本没有 moov-atom,无论是在开头还是结尾!
为了成功解决这个问题,我首先使用 ffmpeg 来“重新生成”文件 - 即,将原始 h264+AAC 曲目重新混合到新的 MP4 文件中,而不重新编码:
在此之后,新文件末尾应该有其正确的 moov-atom 。因此,现在您可以使用 qt-faststart 将其移动到开头,正如 Kit 在他的回答中解释的那样:
这样做后,当文件开始下载时,mediaelement 在单击播放按钮后立即播放我的所有视频! :)
如果你的问题是你已经将所有文件放在类似 youtube 的网站中,你的主机是基于 Linux 的,ffmpeg 不在那里并且你无法自己编译它,你可能会发现获得 ffmpeg 的静态构建很有用。您可以在这里找到:
http://ffmpeg.gusari.org/static/(32 位)
或在这里:
http://dl.dropbox.com/u/24633983/ffmpeg/index.html (64 位)
不幸的是,在我使用的 32 位版本上,没有 qt-faststart,既不是二进制文件,也不是源代码。这种情况下可以从ffmpeg SVN下载并直接用gcc编译。我在超便宜的共享主机中成功做到了这一点。它似乎没有任何构建依赖项。或者你甚至可以尝试 我自己的 qt-faststart 二进制构建 看看它是否有效为你。
编辑:我刚刚发现在较新的版本中根本不需要 qt-faststart 。您可以使用以下选项直接使用 ffmpeg 进行编码:
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:
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:
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:
我想对 John Dyer 的评论进行一些扩展,并指出使用 QTIndexSwapper 不仅适用于 MediaElement.js 的 Flash 后备/后退功能,而且也适用于非 Flash 播放器。
我遇到的问题是在非 Flash 播放器中,我的 .mp4 文件必须在开始播放之前加载完整的视频(直到我让它在没有 Flash 的情况下工作之后我才检查 Flash 版本),并且 QTIndexSwapper 解决了问题。
我想指出这一点,因为当我第一次阅读该评论时,我认为它仅适用于 Flash,并且没有立即尝试。并不是说我从约翰·戴尔那里拿走了任何东西,因为他的评论最终解决了我的问题,我只是想补充一下,希望其他人不会犯我的错误。
如果有人感兴趣,我写了一篇关于此的 博客文章问题以及关于也应该修复它的 PHP 类。
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.