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