FFMPEG 转换 HTML 5 视频不起作用

Question

提问by Brad

I am using FFMPEG to converta video to .mp4, ,ogg, .webmso that it may be viewed in all HTML5 capable browsers using the video tag. The problem is that I manage to convert the video to the 3 required formats but it does not display the video in the video tag, all I get is IE9: red cross, Firefox: Grey cross, could it be a problem with the conversion or is it something to do with the way I am adding them to the source of the video tag. Here is what I have done:

我正在使用FFMPEG 将视频转换为.mp4, ,ogg, .webm以便它可以在所有支持 HTML5 的浏览器中使用 video 标签查看。问题是我设法将视频转换为 3 种所需的格式，但它没有在视频标签中显示视频，我得到的只是 IE9：红叉，火狐：灰叉，这可能是转换的问题还是这与我将它们添加到视频标签源的方式有关吗？这是我所做的：

FFmpeg command line(s):

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

Here is the video tag:

<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 lines for the video support:

<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 命令行：

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>

It would be great if someone could send me the required parameters for ffmpeg to convert the video to the 3 required formats and an example of how they setting the source in the video tag to display them again. And any other advise would be great like how to set the quality up etc when doing the conversion.

如果有人可以向我发送 ffmpeg 所需的参数以将视频转换为 3 种所需的格式以及他们如何在视频标签中设置源以再次显示它们的示例，那就太好了。任何其他建议都会很棒，例如在进行转换时如何设置质量等。

Thanks in advance.

提前致谢。

Answer 1

回答by Brad

Sorted it out, thanks for all the help :) I found the following:

整理出来，感谢所有的帮助:) 我找到了以下内容：

1. You need to download the latest ffmpeg + the presets:

1. 您需要下载最新的 ffmpeg + 预设：

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

2. You need to create a HOME environmetal variable:

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

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

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

3. Copy the presets under the environmental variable folder

3.复制环境变量文件夹下的presets

4. You need to use the following commands to convert using ffmpeg:

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

For mp4 (H.264 / ACC):

对于 mp4 (H.264 / ACC)：

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

For webm (VP8 / Vorbis):

对于 webm (VP8 / Vorbis)：

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

For ogv (Theora / Vorbis):

对于 ogv (Theora / Vorbis)：

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

Answer 2

回答by Michas

I would try this code first. It is as simple as possible.

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

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

Creating mp4 files, minimal number of arguments. Unfortunately, I haven't tested it much.

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

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

To creating ogv files You should use ffmpeg2theora. There are too many problems with ffmpeg.

创建 ogv 文件你应该使用 ffmpeg2theora。ffmpeg的问题太多了。

Answer 3

回答by Viktor

I tried a lot of video files, encoding options, server configurations, FFMPEG versions, other video encoders etc. before finding out that one thing to consider when serving MP4 files for IE9 is the file meta information called moov atom embedded in the MP4 file itself. If it's located at the end of the file, where some encoders including ffmpeg places it, IE9 will not start playing the video unless the whole video file downloaded. Relocating the moov atom metadata to the beginning of the file enables progressive download of the MP4 file, and IE9 handles the video nicely.

我尝试了很多视频文件、编码选项、服务器配置、FFMPEG 版本、其他视频编码器等，然后发现在为 IE9 提供 MP4 文件时要考虑的一件事是嵌入 MP4 文件本身的名为 moov atom 的文件元信息. 如果它位于文件的末尾，包括 ffmpeg 在内的一些编码器将它放在那里，除非下载整个视频文件，否则 IE9 将不会开始播放视频。将 moov atom 元数据重新定位到文件的开头可以实现 MP4 文件的渐进式下载，并且 IE9 可以很好地处理视频。

There's a tool called qt-faststartto perform this operation. Worked wonders for me, compiling and using the Linux command-line version distributed with ffmpeg.

有一个名为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 4

回答by avoision

I think because I'm still a newbie, I'm not allowed to leave comments? So leaving this as an answer, though I think it's more along the lines of a guess.

我想是因为我还是个新手，所以我不能发表评论？因此，将此作为答案，尽管我认为这更像是猜测。

Started playing with HTML5 video a week or so ago. I ran into lots of issues that ultimately turned out to be due to the converted movie files I was working with. Here's the code I used for my examples:

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

I modeled my code after Mark Pilgrim's Dive into HTML (Video)write-up.

我根据 Mark Pilgrim 的Dive into HTML (Video) 文章对我的代码进行建模。

A few things I can think of to try:

我能想到的一些尝试：

1) Remove the additional attributes from your tag. I'm less familiar with what you're implementing (onplaying, onpause), but maybe try using just the basics first: width, height and controls. See if this helps.

1) 从您的标签中删除附加属性。我不太熟悉您正在实施的内容（onplaying、onpause），但也许可以先尝试使用基础知识：宽度、高度和控件。看看这是否有帮助。

2) In my tests, I converted my .ogg and .webm versions using Miro. For whatever reason, the movies would seemingly play file locally... but when I viewed them more than once in my browsers, I'd get blank screens. I ended up using Firefoggto ultimately convert my .ogg and .webm versions. It was odd behavior.

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

Not sure if FFmpeg is a dealbreaker, and something you need to use as part of your workflow. But if you're just looking to get your code and example movies functional and running, Firefogg did the trick for me.

不确定 FFmpeg 是否是破坏者，以及您需要在工作流程中使用的东西。但是，如果您只是想让您的代码和示例电影正常运行并运行，Firefogg 就帮我解决了这个问题。

I ultimately realized what the cause was when I swapped out working versions of other movies, instead of my converted ones. I'd recommend you try plugging in the .mp4, .webm and .ogg versions of Big Buck Bunny... and see if you can even get them to display. At least that way, you could isolate whether it's a syntax or conversion issue.

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

3) Finally, I'd recommend testing out one video file and one browser at a time. This is probably a given, but still worth throwing out there.

3) 最后，我建议一次测试一个视频文件和一个浏览器。这可能是给定的，但仍然值得扔在那里。

Sidenote: once you're good to go with each file type, make sure to list the .mp4 version first. This is from Pilgrim's HTML5 video writeup:

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

iPads running iOS 3.x had a bug that prevented them from noticing anything but the first video source listed. iOS 4 (a free upgrade for all iPads) fixes this bug. If you want to deliver video to iPad owners who haven't yet upgraded to iOS 4, you will need to list your MP4 file first, followed by the free video formats.

运行 iOS 3.x 的 iPad 有一个错误，使他们无法注意到除了列出的第一个视频源之外的任何内容。iOS 4（所有 iPad 的免费升级）修复了这个错误。如果您想向尚未升级到 iOS 4 的 iPad 用户提供视频，您需要先列出您的 MP4 文件，然后再列出免费的视频格式。

Answer 5

回答by JonBaron

I had the same problem with IE9 showing a red cross when trying to show the .mp4 video. Keeping it simple using ffmpeg (as Michas suggested) solved the issue for me.

我在尝试显示 .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>

The ffmpeg parameters: (I used .ogv from ffmpeg2theora as my inputfile):

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

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

My ffmpeg version:

我的 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

回答by user1319499

Having tried most of the suggestions above, here's what actually worked for me to convert wmv files to small mp4, webm, ogg on a Windows7-64 machine:

尝试了上面的大部分建议后，以下是我在 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 is version SVN-r5570

旧\ffmpeg 是版本 SVN-r5570

64bit\ffmpeg is version N-38292-ga4c22e3 built 2/27/12 14:55:47

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

32bit\ffmpeg is version N-39267-g4082198 built 3/25/12 20:25:08

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

(Only the 64 bit version would read the wmv, so I used it to convert to mpg as a common format. Only the old ffmpeg would create an mp4.)

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

Answer 7

回答by Gustav

Make sure your video is served using the correct Content-type-header

确保使用正确的Content-type-header提供您的视频

It should be Content-Type:video/mp4for mp4/m4v.

它应该Content-Type:video/mp4用于 mp4/m4v。

FFMPEG 转换 HTML 5 视频不起作用

提问by Brad

回答by Brad

回答by Michas

回答by Viktor

回答by avoision

回答by JonBaron

回答by user1319499

回答by Gustav

相关推荐

最近更新

标签

FFMPEG 转换 HTML 5 视频不起作用

提问by Brad

回答by Brad

回答by Michas

回答by Viktor

回答by avoision

回答by JonBaron

回答by user1319499

回答by Gustav

相关推荐

Html 如何在 div 类中设置图像的样式？

<pre> 和 <code> HTML 标签有什么区别？

Html 如何清除所有css样式

Html 如何在css和html中设置div的高度

相关推荐

最近更新

标签