Question

我正在使用 FFMPEG将视频转换为 .mp4，ogg，.webm ，以便可以在所有支持HTML5的浏览器中使用视频标签。 问题是我设法将视频转换为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所需的参数以将视频转换为3种所需格式以及他们如何在视频标签中设置源以再次显示它们的示例，那就太棒了。在进行转换时，任何其他建议都会很好，比如如何设置质量等。

提前致谢。

Answer 1

将其排序，感谢所有帮助:)我找到了以下内容：

<强> 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"

Answer 2

我会先尝试这个代码。它尽可能简单。

    <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存在太多问题。

Answer 3

我想因为我还是个新手，我不允许发表评论？所以留下这个作为答案，虽然我认为它更像是一个猜测。

大约一周前开始播放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>

我在Mark Pilgrim撰写Dive into HTML (Video)后写了我的代码。

我可以想到的一些尝试：

1）从标签中删除其他属性。我对你正在实现的内容（onplaying，onpause）不太熟悉，但也许首先尝试使用基础：宽度，高度和控件。看看这是否有帮助。

2）在我的测试中，我使用Miro转换了.ogg和.webm版本。无论出于何种原因，电影似乎在本地播放文件......但是当我在浏览器中不止一次地观看它们时，我会看到空白屏幕。我最终使用Firefogg来最终转换我的.ogg和.webm版本。这是奇怪的行为。

不确定FFmpeg是否是一个交易破坏者，以及您需要在工作流程中使用的东西。但是，如果你只是想让你的代码和示例电影正常运行，那么Firefogg就能为我做好准备。

我最终意识到当我换掉其他电影的工作版本而不是我转换的电影时，原因是什么。我建议你尝试插入Big Buck Bunny的.mp4，.webm和.ogg版本......看看你是否能让它们显示出来。至少就是这样，您可以确定它是语法还是转换问题。

3）最后，我建议一次测试一个视频文件和一个浏览器。这可能是一个给定的，但仍值得抛弃。

旁注：一旦您熟悉每种文件类型，请务必先列出.mp4版本。这是来自Pilgrim的HTML5视频写作：

运行iOS 3.x的iPad有一个错误，阻止他们注意到列出的第一个视频源。 iOS 4（所有iPad的免费升级）修复了这个错误。如果您想将视频发送给尚未升级到iOS 4的iPad用户，则需要先列出您的MP4文件，然后是免费视频格式。

Answer 4

我尝试了很多视频文件，编码选项，服务器配置，FFMPEG版本，其他视频编码器等，然后才发现在为IE9提供MP4文件时要考虑的一件事是文件元信息，称为moov atom嵌入在MP4文件本身。如果它位于文件的末尾，包括ffmpeg在内的某些编码器放置它，IE9将不会开始播放视频，除非整个视频文件已下载。将moov原子元数据重新定位到文件的开头可以逐步下载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

Answer 5

在尝试显示.mp4视频时，我遇到了与IE9显示红叉的问题。使用ffmpeg保持简单（正如Michas建议的那样）为我解决了这个问题。

<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

Answer 6

尝试了上面的大部分建议之后，这就是我在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

old \ ffmpeg是版本SVN-r5570

64bit \ ffmpeg是版本N-38292-ga4c22e3内置2/27/12 14:55:47

32bit \ ffmpeg是版本N-39267-g4082198内置3/25/12 20:25:08

（只有64位版本会读取wmv，所以我用它来转换为mpg作为通用格式。只有旧的ffmpeg会创建一个mp4。）

Answer 7

确保使用正确的Content-type - 标题

投放您的视频

mp4 / m4v应为Content-Type:video/mp4。

FFMPEG转换HTML 5视频不工作

7 个答案: