1

自分のサイトに動画を表示するvideo「古い」方法ではなく、HTML 独自のタグを使用しました。flash

<video src="video.mp4" preload="auto" autobuffer controls autoplay>
<iframe src="http://player.vimeo.com/video/123456" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</video>

自分のコンピューターで、Chrome (30)、Firefox (24)、IE (10) の 3 つの異なるブラウザーでテストしました。期待どおりに機能しました。
次に、別のユーザーに、さまざまなブラウザーを搭載したさまざまなマシンで自分のサイトをテストするように依頼しました。残念ながら、彼は私と同じバージョンのブラウザを使用していましたが、すべてのマシンで動作するわけではありませんでした。
Firefox は彼に次のエラーを表示しました: Video format or MIME type is not supported。

  • 同じブラウザーが異なるマシンで異なる動作をする可能性はありますか?
  • vimeoFirefox が代替コンテンツ (私の場合は iframe 内のビデオ) を表示しなかったのはなぜですか?
  • ビデオがすべてのマシンのすべてのブラウザで表示されることを確認する方法はありますか?

ありがとうございました！

4

1 に答える 1

3

Firefox にはネイティブの MP4/H.264 サポートがなく、システムで利用可能なコーデックを使用します。適切な H.264 コーデックがない場合、ビデオは再生されず、そのエラー メッセージが表示されます。

http://en.wikipedia.org/wiki/HTML5_video#Supported_video_formatsも参照してください

フォールバック コンテンツは、ブラウザがvideo要素をまったく理解できない場合にのみ使用されます。サポートされていないコーデックでは、フォールバックが使用されることはありません。

OS に関係なく、すべての主要なブラウザでビデオが確実に再生されるようにするには、source要素を使用してさまざまな形式でビデオを提供する必要があります。

現在、WEBM VP8/9 を使用しており、OGG Theora および MP4 H.264 で実行できます。

<video preload="auto" autobuffer controls autoplay>
    <source src="video.webm" type="video/webm">
    <source src="video.ogv" type="video/ogg">
    <source src="video.mp4" type="video/mp4">

    <iframe src="http://player.vimeo.com/video/123456" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</video>

また、要素または最後の要素でerrorイベントを利用して、要素をそのコンテンツに置き換える JavaScript ベースのフォールバックを実装することもできます。videosourcevideo

W3 仕様の例:

<script>
 function fallback(video) {
   // replace <video> with its contents
   while (video.hasChildNodes()) {
     if (video.firstChild instanceof HTMLSourceElement)
       video.removeChild(video.firstChild);
     else
       video.parentNode.insertBefore(video.firstChild, video);
   }
   video.parentNode.removeChild(video);
 }
</script>
<video controls autoplay>
 <source src='video.mp4' type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
 <source src='video.ogv' type='video/ogg; codecs="theora, vorbis"'
         onerror="fallback(parentNode)">
 ...
</video>

http://www.w3.org/html/wg/drafts/html/master/embedded-content-0.html#source-default-media

于 2013-10-04T18:03:21.703 に答える