HTML Webページに動画を挿入する方法をまとめます。

ここで、ページ内で 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 を示すことです。このとき、属性には値がないか、その値が名前と同じです (ここでは、自動再生は