ここで、ページ内で video タグを使用したい場合は、Ogg Theora または VP8 をサポートする状況 (これに何も起こらない場合) (Opera、Mozilla、Chrome) と、H をサポートする状況の 3 つの状況を考慮する必要があります。 264 (Safari、IE 9、Chrome)、サポートされていません (IE6、7、8)。さて、ビデオ タグの使用、ビデオ オブジェクトで使用できるメディア属性とメソッド、メディア イベントなど、技術的な観点から HTML 5 ビデオを理解しましょう。この記事では主に HTML にビデオを挿入する方法の概要を紹介します。困っている友達が参考になれば幸いです。
Video タグの使用法
Video タグには、src、poster、preload、autoplay、loop、controls、width、height などのいくつかの属性と、内部で使用されるタグ が含まれています。 タグに加えて、Video タグには、指定されたビデオが再生できない場合に返されるコンテンツを含めることもできます。
(1) src属性とposter属性
src属性が何に使われるかは想像できると思います。 ![]()
タグと同様に、この属性はビデオのアドレスを指定するために使用されます。 ｐｏｓｔｅｒ属性は、現在のビデオデータが無効な場合に表示する画像（プレビュー画像）を指定するために使用される。無効なビデオ データは、ビデオがロード中であること、ビデオ アドレスが正しくないことなどを意味する可能性があります。
<video width="658"
height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>
ログイン後にコピー
(2) preload 属性
この属性は、ビデオがプリロードされるかどうかを定義するために使用されます。この属性には、none、metadata、auto の 3 つのオプションの値があります。この属性が使用されない場合、デフォルトは auto です。
<video width="658"
height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>
ログイン後にコピー
ログイン後にコピー
なし: プリロードはありません。この属性値を使用すると、ユーザーがこのビデオを期待していないとページ作成者が判断したり、HTTP リクエストを削減したりすることができます。
メタデータ: 部分的にプリロードされています。この属性値を使用することは、ユーザーがこのビデオを期待していないとページ作成者が信じていることを意味しますが、ユーザーに何らかのメタデータ (サイズ、最初のフレーム、トラック リスト、再生時間など) を提供します。
自動: すべてプリロードされています。
(3) autoplay 属性
も名前を見れば用途が分かる属性です。 Autoplay 属性は、ビデオを自動的に再生するかどうかを設定するために使用されます。これはブール型の属性です。表示されている場合は、自動再生されていないことを意味します。
<video width="658"
height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>
ログイン後にコピー
ログイン後にコピー
HTMLのブール属性の値はtrueとfalseではないことに注意してください。正しい使用方法は、この属性をタグ内で使用して true を示すことです。このとき、属性には値がないか、その値が名前と同じです (ここでは、自動再生は
または
); タグ内でこの属性を使用しない場合は false を意味します (ここで自動再生しないのは
です)。
(4) ループ属性
<video width="658"
height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>
ログイン後にコピー
は、ビデオがループで再生されるかどうかを指定するために使用されます。これもブール属性です。
(5) Controls 属性
<video width="658"
height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>
ログイン後にコピー
Controls 属性は、ページ作成者が再生コントローラーを生成するためにスクリプトを使用していないこと、およびブラウザーが独自のコントローラーを有効にする必要があることをブラウザーに示すために使用されます。再生コントロールバー。
コントロール バーには、再生と一時停止のコントロール、再生の進行状況のコントロール、音量コントロールなどを含める必要があります。
各ブラウザのデフォルトの再生コントロールバーはインターフェースが異なります。私のブラウザに奇妙な問題が発生したため、Firefox と Safari の Video タグが正しく機能していないため、オンラインでこれら 2 つのスクリーンショットしか見つけることができません。
(6) width属性とheight属性
はタグの共通属性なので言うまでもありません。
(7) ソースタグ
<video width="658"
height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv"
/><source src="http://www.youname.com/images/first.ogg"
/></video>
ログイン後にコピー
ログイン後にコピー
ソースタグは、メディアの複数の選択 (ブラウズ) を指定するために使用されます (オーディオ タグにもこのタグを含めることができるため、ここではビデオの代わりにメディアが使用されます)ブラウザは最終的に 1 つのファイル アドレスのみを選択でき、メディア タグで src 属性が使用されていない場合にのみ使用できます。
ブラウザは、タグで指定された動画がソースタグの順に再生可能かどうかを確認します（再生できない場合は、動画形式がサポートされていない、動画が存在しないなどの可能性があります）。次のものと交換してください。この方法は、さまざまなブラウザとの互換性を保つために主に使用されます。 Source タグ自体には何の意味もないため、単独で使用することはできません。
このタグには、src、type、media の 3 つの属性が含まれています。
src 属性: video タグと同様に、メディアのアドレスを指定するために使用されます。
Type 属性: src 属性で指定されたメディアのタイプを記述するために使用され、ブラウザがメディアを取得する前にこのカテゴリのメディア形式をサポートしているかどうかを判断するのに役立ちます。
Media 属性: メディアが使用されるメディアを記述するために使用されます。設定されていない場合、デフォルト値は all で、すべてのメディアがサポートされていることを示します。
