FFMPEG转换HTML5视频不起作用。

Question

FFMPEG转换HTML5视频不起作用。

17

我正在使用FFMPEG进行转换，将视频转换为.mp4, .ogg, .webm格式，以便在所有HTML5兼容的浏览器中使用video标签查看。 问题是，我成功地将视频转换为所需的3种格式，但它不会在视频标签中显示，在IE9中只有一个红色叉，Firefox中是灰色叉，这可能与转换有关还是与我添加到视频标签源的方式有关。 以下是我所做的：

FFmpeg命令行：

ffmpeg -i test.mp4 test.mp4
ffmpeg -i test.mp4 test.ogg
ffmpeg -i test.mp4 test.webm

这是视频标签：

<video id="video"  height="340" width="470" onplaying="PlayVideoFromVid('PAUSE')"  onpause="PlayVideoFromVid('PLAY')" onended="ResetVideo()" preload="true" autobuffer="true" controls="true">
    <source src="test.ogg" type="video/ogg"></source>
    <source src="test.mp4" type="video/mp4"></source>
</video>

视频支持的Webconfig配置行：

<staticContent>
    <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
    <mimeMap fileExtension=".ogg" mimeType="audio/ogg" />
    <mimeMap fileExtension=".oga" mimeType="audio/ogg" />
    <mimeMap fileExtension=".ogv" mimeType="video/ogg" />
    <mimeMap fileExtension=".webm" mimeType="video/webm" />
</staticContent>

希望有人可以提供使用ffmpeg将视频转换成三种所需格式的必要参数，并且给出设置源以再次显示这些格式的视频标签的示例。在进行转换时如何提高质量等任何其他建议都非常欢迎。提前感谢。

- Brad

Firefox的版本是多少？服务器能够从互联网访问吗？ - Michas

谢谢您的快速回复。我正在本地使用IIS运行Firefox 4、IE 9和Safari 5.07。我已经成功地在标签中播放了一个从网络上下载的视频“大雄兔预告片”，但现在我正在尝试使用ffmpeg将它们转换，但是它无法播放视频。我不确定是否需要在传递给ffmpeg的参数中包含特定的编解码器，或者视频标签的源标记中是否缺少某些内容。 - Brad

ffmpeg和Theora存在一些问题。你应该尝试使用ffmpeg2theora。我还没有对它在h264上的表现进行足够的测试。 - Michas

7个回答

4

我会先尝试这段代码。它非常简单易懂。

    <video controls="true">
        <source src="test.mp4" type="video/mp4"></source>
        <source src="test.webm" type="video/webm"></source>
        <source src="test.ogv" type="video/ogg"></source>
    </video>

创建mp4文件，最少的参数。不幸的是，我没有进行过太多测试。

    ffmpeg -i input_file -vcodec libx264 -vpre medium output_file.mp4

为了创建ogv文件，您应该使用ffmpeg2theora。使用ffmpeg存在太多问题。

- Michas

2

我认为因为我还是个新手，所以不能留下评论？所以把这个作为答案，虽然我认为更像是猜测。

一周左右前开始尝试使用HTML5视频。我遇到了许多问题，最终发现是由于我处理的转换电影文件引起的。下面是我用于示例的代码：

<video id="movie" width="600" height="338" poster="http://yourDomain.com/yourDirectory/posterFrame.jpg" controls="true" autoplay="true">
    <source src="http://yourDomain.com/yourDirectory/yourMovie.mp4" type='video/mp4' />
    <source src="http://yourDomain.com/yourDirectory/yourMovie.webm" type='video/webm' />
    <source src="http://yourDomain.com/yourDirectory/yourMovie.ogg" type='video/ogg; codecs="theora, vorbis"' />
    <object width="600" height="338" type="application/x-shockwave-flash" data="http://whywouldyouclickthat.com/flowplayer/flowplayer-3.2.7.swf"><param name="movie" value="http://yourDomain.com/flowplayer/flowplayer-3.2.7.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"clip": {"url": "http://yourDomain.com/yourDirectory/yourMovie.mp4", "autoPlay":true, "autoBuffering":true},"plugins": {"controls": null}}' /></object>
</video>

我模仿了马克·皮尔格里姆的Dive into HTML (Video)教程。

以下是我的一些建议:

1）从你的标签中删除附加属性。我对你正在实现的东西不太熟悉（onplaying，onpause），但也许先尝试使用基础知识：width、height和controls。看看这是否有帮助。

2）在我的测试中，我使用Miro将我的.ogg和.webm版本转换。由于某种原因，电影似乎只能在本地播放...但当我在浏览器中查看它们超过一次时，我会得到空白屏幕。最终，我使用Firefogg来转换我的.ogg和.webm版本。这是奇怪的行为。

不确定FFmpeg是否是一个不可或缺的部分，以及您需要在工作流程中使用它的原因。但是，如果您只想使代码和示例电影功能正常运行，Firefogg对我起了作用。

最终，我意识到问题出在哪里，当我替换其他电影的工作版本而不是我的转换版本时。我建议您尝试插入Big Buck Bunny的.mp4、.webm和.ogg版本，看看是否可以显示它们。至少这样，您可以分离出是否存在语法或转换问题。

3）最后，我建议逐个视频文件和浏览器进行测试。这可能是显而易见的，但仍然值得一提。

附注：一旦你已经准备好每个文件类型，请确保首先列出.mp4版本。这来自皮尔格里姆的HTML5视频教程:

iOS 3.x的iPad存在一个错误，阻止它们注意到除第一个列出的视频源以外的任何内容。iOS 4（对所有iPad都是免费升级）修复了此错误。如果您想向尚未升级到iOS 4的iPad所有者提供视频，则需要首先列出MP4文件，然后是免费视频格式。

- avoision

感谢您的回复，onplay和onpause只是触发JavaScript事件，并且如果我使用已经转换好的从互联网下载的.mp4和.ogg视频，则可以正常工作。 - Brad

继续：当我使用从网络下载的.mp4视频和.ogg视频，并在视频标签中引用这些视频时，它们可以完美播放。但问题是，一旦我使用ffmpeg.exe 0.6.1（因为我必须在服务器端执行它），它会创建所需的3个视频，这些视频可以在VLC播放器中运行，但无法在视频标签中工作。我仍然认为这与FFmpeg有关。 - Brad

继续：我在某个地方读到0.6.2完全符合HTML 5标准，但我似乎找不到该版本的构建（ffmpeg.exe），也不知道如何使用“ibx264 -vpre slow -vpre”预设，因为它总是显示错误“找不到预设 'slow' 的文件”，而明显应该使用正确的编解码器进行转换。 - Brad

1

在为IE9提供MP4文件时，需要考虑嵌入在MP4文件本身中的文件元信息moov atom。如果它位于文件末尾（包括ffmpeg等某些编码器放置的位置），IE9将不会开始播放视频，除非整个视频文件都被下载。将moov atom元数据重新定位到文件开头可以实现MP4文件的渐进式下载，IE9可以很好地处理视频。

有一个名为qt-faststart的工具可以执行此操作。对我来说效果非常好，我使用了与ffmpeg一起分发的Linux命令行版本进行编译和使用。

make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4

- Viktor

在对mp4文件应用qt-faststart之后，你能够在下载整个视频之前跳转到任何位置吗？我注意到它可以同时播放和下载视频，但如果我试图跳转到尚未下载的视频部分，它不允许我这样做，而是重新从开头开始播放。 - Shakti Singh

@ShaktiSingh 是的，我能够使用IE9跳转到尚未下载的部分并从那里开始播放。加载几秒钟后，视频就会从所选位置开始播放。您是否在后端实现了接受范围、内容范围头等部分内容服务？ - Viktor

最近似乎在FFmpeg主程序中添加了qt-faststart功能：http://betterlogic.com/roger/2012/10/ffmpeg-not-need-qt-faststart-at-all/ - rogerdpack

0

在尝试了上面大部分的建议之后，以下是我实际使用的方法，在Windows7-64机器上将wmv文件转换为小型mp4、webm和ogg格式：

64bit\ffmpeg -i test.wmv test.mpg

old\ffmpeg -i test.mpg -vcodec h264 -s 320x240 test.mp4

32bit\ffmpeg -i test.mpg -vcodec libvpx -acodec libvorbis -f webm -s 320x240 test.webm

32bit\ffmpeg -i test.mpg -vcodec libtheora -acodec libvorbis -s 320x240 test.ogg

旧版\ffmpeg是版本SVN-r5570

64位\ffmpeg是版本N-38292-ga4c22e3，构建于2012年2月27日14:55:47

32位\ffmpeg是版本N-39267-g4082198，构建于2012年3月25日20:25:08

(只有64位版本才能读取wmv文件，因此我使用它将其转换为通用格式mpg。只有旧版的ffmpeg才能创建mp4文件。)

- user1319499

0

我也遇到了IE9在尝试显示.mp4视频时显示红叉的问题。像Michas建议的那样，简单地使用ffmpeg解决了我的问题。

<video id="movie" width="600" height="360" controls preload="auto">
   <source src="http://yourDomain.com/faceplant.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source> 
   <source src="http://yourDomain.com/faceplant.webm" type='video/webm; codecs="vp8.0,vorbis"'></source>
   <source src="http://yourDomain.com/faceplant.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
</video>

ffmpeg参数：（我使用了来自ffmpeg2theora的.ogv作为输入文件）：

ffmpeg -i input_file.ogv -vcodec libx264 -vpre hq output_file.mp4

我的ffmpeg版本：

ffmpeg 0.8.3
libavutil    51.  9. 1 / 51.  9. 1
libavcodec   53.  7. 0 / 53.  7. 0
libavformat  53.  4. 0 / 53.  4. 0
libavdevice  53.  1. 1 / 53.  1. 1
libavfilter   2. 23. 0 /  2. 23. 0
libswscale    2.  0. 0 /  2.  0. 0
libpostproc  51.  2. 0 / 51.  2. 0

- JonBaron

0

请确保您的视频使用正确的Content-Type头进行服务。

对于mp4/m4v，应为Content-Type：video/mp4。

- Gustav

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Brad · Accepted Answer

问题已解决，感谢大家的帮助 :) 我找到了以下内容：

1. 你需要下载最新的ffmpeg和预设：

ffmpeg.arrozcru.org/autobuilds/ffmpeg/mingw32/static/

2. 你需要创建一个HOME环境变量：

(a) www.moosechips.com/2009/08/installing-ffmpeg-binary-in-windows/

(b) www.itechtalk.com/thread3595.html

3. 将预设复制到环境变量文件夹下：

4. 使用以下命令使用ffmpeg进行转换：

对于mp4（H.264 / ACC）：

ffmpeg -i INPUTFILE -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 "OUTPUTFILE.mp4"

对于webm（VP8 / Vorbis）：

ffmpeg -i "INPUTFILE"  -b 1500k -vcodec libvpx -acodec libvorbis -ab 160000 -f webm -g 30 "OUTPUTFILE.webm"

针对 ogv 格式（Theora / Vorbis）：

ffmpeg -i "INPUTFILE" -b 1500k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30 "OUTPUTFILE.ogv"