web-dev-qa-db-ja.com

FFMPEG Convert HTML5ビデオが機能しない

私は変換するFFMPEGビデオを。mp4、、ogg、.webmで表示できるように使用していますビデオタグを使用するすべてのHTML5対応ブラウザ）。 問題は、ビデオを3つの必要な形式に変換できたのに、ビデオタグにビデオが表示されないことです、IE9：赤十字、Firefox：灰色十字、できますか？変換に問題があるのか​​、それともビデオタグのソースに追加する方法と関係があるのでしょうか。 これが私がしたことです：

  1. FFmpegコマンドライン：

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

  2. これがビデオタグです：

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

  3. ビデオサポートの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つの必要なフォーマットに変換するために必要なパラメータと、それらを再び表示するためにビデオタグにソースを設定する方法の例を送ってくれると素晴らしいでしょう。そして、変換を行うときに品質を設定する方法など、他のアドバイスは素晴らしいでしょう。

前もって感謝します。

htmlvideoffmpeg
16
Brad

それを整理しました、すべての助けに感謝します:)私は以下を見つけました：

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"
30
Brad

最初にこのコードを試してみます。それは可能な限り単純です。

    <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にはあまりにも多くの問題があります。

3
Michas

IE9用のMP4ファイルを提供するときに考慮すべきことの1つは、moov atom MP4ファイル自体に埋め込まれています。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
1
Viktor

私はまだ初心者なのでコメントを残してはいけないと思いますか？ですから、これを答えとして残しておきますが、それは推測に沿ったものだと思います。

1週間ほど前に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） write-upに基づいてコードをモデル化しました。

私が試すことができるいくつかのこと：

1）タグから追加の属性を削除します。私はあなたが実装しているもの（再生中、一時停止中）にあまり詳しくありませんが、最初に基本的なもの、つまり幅、高さ、コントロールだけを使用してみてください。これが役立つかどうかを確認してください。

2）テストでは、 Miro を使用して.oggバージョンと.webmバージョンを変換しました。どういうわけか、映画はローカルでファイルを再生しているように見えます...しかし、ブラウザで複数回表示すると、空白の画面が表示されます。最終的に.oggと.webmのバージョンを変換するために Firefogg を使用することになりました。それは奇妙な行動でした。

FFmpegがディールブレーカーであり、ワークフローの一部として使用する必要があるものであるかどうかはわかりません。しかし、コードとサンプルムービーを機能させて実行することだけを考えているのであれば、Firefoggが私に代わってやってくれました。

私は最終的に、変換されたものではなく、他の映画の動作バージョンを交換したときに原因が何であるかを理解しました。 Big Buck Bunnyの.mp4、.webm、.oggバージョンを接続してみて、それらを表示できるかどうかを確認することをお勧めします。少なくともそうすれば、構文の問題なのか変換の問題なのかを特定できます。

3）最後に、一度に1つのビデオファイルと1つのブラウザをテストすることをお勧めします。これはおそらく当然のことですが、それでもそこに捨てる価値があります。

補足：各ファイルタイプに問題がなければ、最初に.mp4バージョンをリストしてください。これは、巡礼者のHTML5ビデオの記事からのものです。

iOS 3.xを実行しているiPadにはバグがあり、リストされている最初のビデオソース以外には気付かなかった。 iOS 4（すべてのiPadの無料アップグレード）はこのバグを修正します。 iOS 4にまだアップグレードしていないiPadの所有者にビデオを配信する場合は、最初にMP4ファイルをリストし、次に無料のビデオ形式をリストする必要があります。

1
avoision

正しいContent-type-ヘッダーを使用して動画が配信されていることを確認してください

Mp4/m4vの場合はContent-Type:video/mp4である必要があります。

0
Gustav

.mp4ビデオを表示しようとすると、IE9で赤い十字が表示されるという同じ問題が発生しました。 （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
0
JonBaron

上記の提案のほとんどを試した後、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です

64ビット\ ffmpegはバージョンN-38292-ga4c22e3ビルド2/27/1214：55：47

32ビット\ ffmpegはバージョンN-39267-g4082198ビルド3/25/1220：25：08

（64ビットバージョンのみがwmvを読み取るため、これを使用して一般的な形式としてmpgに変換しました。古いffmpegのみがmp4を作成します。）

0
user1319499