可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I am using FFMPEG to convert a video to .mp4, ,ogg, .webm so 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 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>
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.
Thanks in advance.
回答1:
Sorted it out, thanks for all the help :) I found the following:
1. You need to download the latest ffmpeg + the presets:
ffmpeg.arrozcru.org/autobuilds/ffmpeg/mingw32/static/
2. You need to create a HOME environmetal variable:
(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
4. You need to use the following commands to convert using ffmpeg:
For mp4 (H.264 / ACC):
ffmpeg -i INPUTFILE -b 1500k -vcodec libx264 -vpre slow -vpre baseline -g 30 "OUTPUTFILE.mp4"
For webm (VP8 / Vorbis):
ffmpeg -i "INPUTFILE" -b 1500k -vcodec libvpx -acodec libvorbis -ab 160000 -f webm -g 30 "OUTPUTFILE.webm"
For ogv (Theora / Vorbis):
ffmpeg -i "INPUTFILE" -b 1500k -vcodec libtheora -acodec libvorbis -ab 160000 -g 30 "OUTPUTFILE.ogv"
回答2:
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.
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.
回答3:
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.
There's a tool called qt-faststart to perform this operation. Worked wonders for me, compiling and using the Linux command-line version distributed with ffmpeg.
make tools/qt-faststart
sudo cp tools/qt-faststart /usr/local/bin/
qt-faststart original_file.mp4 modified_file.mp4
回答4:
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:
<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.
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.
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 Firefogg to ultimately convert my .ogg and .webm versions. It was odd behavior.
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.
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.
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.
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:
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.
回答5:
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.
<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 -i input_file.ogv -vcodec libx264 -vpre hq output_file.mp4
My ffmpeg version:
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
回答6:
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:
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
64bit\ffmpeg is version N-38292-ga4c22e3 built 2/27/12 14:55:47
32bit\ffmpeg is version N-39267-g4082198 built 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.)
回答7:
Make sure your video is served using the correct Content-type-header
It should be Content-Type:video/mp4 for mp4/m4v.
