html - HTML5 ビデオを実装する最良の方法

Question

HTML5 ビデオは、その支持者が私たちに信じさせようとしているよりもはるかに複雑であることを理解しています。Safari は独自の H.264 コーデックを使用しますが、Firefox、Chrome、Opera はすべてオープンソースの Theora をサポートしています。Internet Explorer はどちらもサポートしていないため、.mov や Flash などのフォールバックが必要です。

これらすべてのブラウザーでの HTML5 のステップバイステップ ガイドをまとめた優れたガイドをどこかで見つけましたが、どこにも見つかりません。とてもうるさい ：（

これらすべてのブラウザーがカバーされるように HTML5 ビデオを実装する最良の方法は何ですか? (残念ながら、Flash はオプションではありません。)

---

編集:わかりました、私が読んだことから、ここに私自身の答えがあります:これはHTML 5ビデオを実装する最良の方法です...

    <video id="video" width="450" height="170" preload="auto" autoplay="autoplay">
        <source src="../static/video/video.mp4" />
        <source src="../static/video/video.webm" type='video/webm; codecs="vp8, vorbis"' />
        <source src="../static/video/video.ogv" type='video/ogg; codecs="theora, vorbis"' />
        <!-- Fallback (either Flash, an image, or a "Video not supported" message, etc.) -->
    </video>

これまでのところ、すべてのブラウザーで期待どおりに機能する唯一の方法です。残念ながら、Chrome で自動再生が機能していないようですか? :(

更新: Chrome は自動再生をサポートしていません。

Answer 1

Kroc Camenのこのガイドは、http： //camendesign.com/code/video_for_everybodyが必要なガイドだと思います。

Flashを使用して古いIEをサポートすることに満足しているのであれば、彼がそこで概説しているほど難しくはありません。

各ビデオの2つのバージョン、1つはTheora、もう1つはH.264で、可能な限りすべてをカバーします。Theoraの代わりにFlashを使用しているブラウザを気にしないのであれば、1つのH.264で十分です。

WebMでも読む価値があり、theoraに取って代わるように設定されています。

Answer 2

<video id="movie" width="320" height="320" preload controls>
  <source src="pr6.mp4" type='video/mp4; codecs=avc1.42E01E, mp4a.40.2"' />
  <source src="pr6.webm" type='video/webm; codecs="vp8, vorbis"' />
  <source src="pr6.ogv" type='video/ogg; codecs="theora, vorbis"' />
  <object width="320" height="240" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf">
    <param ... />
  </object>
</video>

この例は、本HTML5 Up and Runningから取られています。<video>サポートされている各ビデオ エンコーディングを 1 つのタグ内に個別にリストします。ブラウザは、最初のものから始めて、それぞれを試します。この例は、3 つのエンコーディングを示しています。実際のビデオ エンコーディングは自分で行う必要があります。複数のブラウザをサポートするには、複数のエンコーディングが必要です。

最後のエントリは、新しい HTML5 ビデオ タグをサポートしていないブラウザーのフォールバックです。この例ではフラッシュを使用しましたが、お好みの従来の形式を使用できます。

Answer 3

Flash がオプションではない場合、理由は述べていませんが、それは問題ではないと思います。IE 用のビデオをまったく提供しないでよろしいですか、それとも何をお望みですか?

上記の例はすべて適切で有効です。Flash オプションが入力されている場合は、それを必要なもの、画像、ブラウザーがサポートされていないことをユーザーに通知するテキスト、代わりにダウンロードするビデオへのリンクを提供するものに置き換えることができます。基本的にブラウザは、何かに到達するまで理解できないものはすべて無視するため、本当に必要なものは何でも。

Answer 4

これはあなたが話しているガイドですか？