HTML5 でビデオを表示するにはどうすればよいですか? デモ_html5 チュートリアルのスキル

現在、ほとんどのビデオは Flash などのプラグインを介して表示されます。ただし、すべてのブラウザに同じプラグインがあるわけではありません。

HTML5 では、video 要素を介してビデオを含める標準的な方法が指定されています。
HTML5 では、video 要素は現在 3 つの形式のビデオ ファイルをサポートしています。
1.Ogg = Theora ビデオ エンコーディングと Vorbis オーディオ エンコーディングを備えた Ogg ファイル
2.MPEG4 = H.264 ビデオを備えた MPEG 4 ファイルエンコーディングと AAC オーディオ エンコーディング
3.WebM = VP8 ビデオ エンコーディングと Vorbis オーディオ エンコーディングを使用した WebM ファイル

では、HTML5 でビデオを表示するにはどうすればよいでしょうか?例は次のとおりです。

コードをコピー

コードは次のとおりです:

ここでは、video 要素の各属性の意味について説明します。名前のとおり、コントロールについては説明しません。は、ビデオの再生、音量、一時停止のコントロールです。賢明な方であれば、ビデオ要素の途中に挿入された中国語の文字は、ユーザーのブラウザがビデオ形式の使用をサポートしていないことを示すものであることを知っているはずです。

Safari ブラウザに適していることを確認するには、ビデオ ファイルの形式が MP4 である必要があることに注意してください。 ogg 形式のビデオは、Firefox、Opera、Chrome ブラウザーに適しています。 Internet Explorer 8 は video 要素をサポートしていません。 IE 9 では、MPEG4 を使用したビデオ要素がサポートされる予定です。

もちろん、ブラウザがどのようなビデオ形式をサポートしているかわからない場合は、最初にそれを確認することができます。興味がある場合は、別のブログ投稿をご覧ください。迷惑をかけたくない場合はどうすればよいですか?これを行うことができます:

コードをコピーします

コードは次のとおりです:

<ビデオ幅= "500" 高さ="250" コントロール="コントロール">
<ソース src="movie.ogg" type="video/ogg">
<ソース src= "movie.mp4" type="video/mp4">
お使いのブラウザはこのビデオ形式をサポートしていません。

video 要素では複数のソース要素を使用できます。ソース要素は、異なるビデオ ファイルをリンクできます。ブラウザは最初に認識された形式を使用するため、別の形式でさらにいくつかのビデオを準備するだけで済みます。
次に、いくつかの video タグの属性を紹介します。
1.autoplay: この属性の出現は、ビデオが準備ができたら自動的に再生されることを意味します。 使用法: autoplay="autoplay"
2.コントロール: この属性の外観 属性は、再生ボタンなどのコントロールをユーザーに表示することを意味します。 使用法:controls="controls"
3.height: 高さを設定
4.width: 幅を設定
5.loop: 自動再生、使用法:loop="loop"
6.preload: ページがロードされるときにビデオがロードされ、再生の準備が行われます。使用法: preload="auto"
auto - 全体をロードします。ページがロードされたときのビデオ
meta - ページがロードされたときのみメタデータをロードするとき
none - ページがロードされた後にビデオをロードしません
注: 自動再生が使用されている場合、プリロードは無視されます
7.src: 再生する動画のURL