HTMLページにビデオを挿入する方法の概要

ページでビデオ タグを使用する場合は、Ogg Theora または VP8 (これに問題がない場合) をサポートするもの (Opera、Mozilla、Chrome)、H.264 をサポートするもの (Safari、IE 9、Chrome)、およびサポートしないもの (IE6、7、8) の 3 つの状況を考慮する必要があります。さて、今度はビデオ タグの使用、ビデオ オブジェクトで使用できるメディア属性とメソッド、メディア イベントなど、技術的な観点から HTML 5 ビデオについて見ていきましょう。

ビデオタグの使用

ビデオ タグには、src、poster、preload、autoplay、loop、controls、width、height、および内部で使用されるタグ <source> などのいくつかの属性が含まれています。 <source> タグに加えて、Video タグには、指定されたビデオを再生できない場合に返されるコンテンツを含めることもできます。

（１）src属性とposter属性

src 属性が何に使用されるかは想像できるでしょう。 <img> タグと同様に、この属性はビデオの URL を指定するために使用されます。 poster 属性は、現在のビデオ データが無効な場合に表示される画像 (プレビュー画像) を指定するために使用されます。ビデオ データが無効になる原因としては、ビデオが読み込まれている、ビデオ アドレスが正しくないなどが考えられます。

<ビデオ幅="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="自動再生"></video>

（２）プリロード属性

このプロパティも名前からわかるとおりです。ビデオをプリロードするかどうかを定義するために使用されます。この属性には、none、metadata、auto の 3 つの値を指定できます。このプロパティが使用されない場合は、デフォルトで自動に設定されます。

<ビデオ幅="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="自動再生" preload="なし"></video>

なし: プリロードは実行されません。この属性値は、ページ作成者が、ユーザーがこのビデオを期待していないことを示すため、または HTTP リクエストを減らすために使用できます。

メタデータ: 部分的にプリロードされています。この属性値を使用することで、ページ作成者はユーザーがこのビデオを期待していないと想定し、ユーザーに対していくつかのメタデータ（寸法、最初のフレーム、トラック リスト、継続時間など）を提供します。

自動: すべてをプリロードします。

（３）自動再生属性

これも名前を見ればその有用性がわかる属性です。 Autoplay 属性は、ビデオを自動的に再生するかどうかを設定するために使用されます。これはブール属性です。表示されている場合、自動再生を意味し、表示されていない場合、自動再生ではないことを意味します。

<ビデオ幅="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="自動再生" preload="なし"></video>

HTML のブール属性の値は true と false ではないことに注意してください。正しい使用法は、この属性をタグ内で使用して true を示すことです。この場合、属性には値がないか、その値は常にその名前と同じです (ここで、自動再生は <video autoplay /> または <video autoplay="autoplay" />)。タグ内でこの属性を使用しない場合は false を示します (ここで、自動再生は <video /> ではありません)。

（４）ループ属性

<ビデオ幅="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="自動再生" loop="ループ"></video>

ご覧のとおり、 loop 属性はビデオをループ再生するかどうかを指定するために使用されます。これもブール属性です。

（５）制御属性

<ビデオ幅="658"
 height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="自動再生" preload="なし" controls="コントロール"></video>

Controls プロパティは、ページ メーカーが再生コントローラーを生成するためにスクリプトを使用しなかったこと、およびブラウザーが独自の再生コントロール バーを有効にする必要があることをブラウザーに示すために使用されます。

コントロール バーには、再生一時停止コントロール、再生進行コントロール、音量コントロールなどが含まれている必要があります。

各ブラウザのデフォルトの再生コントロール バーはインターフェイスが異なります。私のブラウザの奇妙な問題により、Firefox と Safari のビデオ タグが正しく機能しないため、インターネット上ではこれら 2 つのスクリーンショットしか見つかりません。

（6）幅と高さの属性

これはタグの共通属性なので、これ以上説明する必要はありません。

（7）ソースタグ

<ビデオ幅="658"
 height="444" poster="http://www.youname.com/images/first.png" autoplay="自動再生" preload="なし" controls="コントロール"><source src="http://www.youname.com/images/first.ogv"
 /><ソース src="http://www.youname.com/images/first.ogg"
 </ビデオ>

ソース タグは、メディアの複数の選択可能な (ブラウザは最終的に 1 つしか選択できません) ファイル アドレスを指定するために使用されます (オーディオ タグにもこのタグを含めることができるため、ここではビデオではなくメディアが使用されます)。また、メディア タグが src 属性を使用しない場合にのみ使用できます。

ブラウザはソースタグの順に、タグで指定された動画が再生可能かどうかを確認します（動画形式がサポートされていない、動画が存在しないなどの可能性があります）。再生​​できない場合は、次の動画に切り替えます。この方法は主に、さまざまなブラウザとの互換性を保つために使用されます。ソース タグ自体は意味を表さず、単独では表示できません。

このタグには、src、type、media の 3 つの属性が含まれています。

src 属性: ビデオ タグと同じように、メディア アドレスを指定するために使用されます。

Type 属性: src 属性で指定されたメディアのタイプを示すために使用され、メディアを取得する前にブラウザーがこのタイプのメディア形式をサポートしているかどうかを判断するのに役立ちます。

メディア属性: メディアが使用されるメディアを示すために使用されます。設定されていない場合、デフォルト値は all であり、すべてのメディアがサポートされていることを示します。 <style> タグの media 属性について考えてみませんか?同じ、同じ、同じ。

（８）完全な例

<ビデオ幅="658"
 height="444" poster="http://www.youname.com/images/first.png" autoplay="自動再生" preload="なし" controls="コントロール"><source src="http://www.youname.com/images/first.ogv"
 /><ソース src="http://www.youname.com/images/first.ogg"
 </ビデオ>

このコードは、ページ上のビデオを定義します。このビデオのプレビュー画像は poster の属性値であり、ブラウザのデフォルトのメディア コントロール バーが表示され、ビデオのメタデータがプリロードされ、ループ再生されます。幅は 900 ピクセル、高さは 240 ピクセルです。

最初に選択されたビデオ アドレスは最初のソース タグの src 属性値、ビデオ カテゴリは Ogg ビデオ、ビデオ コーデックは Theora、オーディオ コーデックは Vorbis、再生メディアはディスプレイです。2 番目に選択されたビデオ アドレスは繰り返されません。 IE との互換性も確保したい場合は、最後のソース タグの後に Flash プレーヤー タグ セットを追加するか、少しの JavaScript コードを使用します。

要約する

上記は、編集者が紹介した HTML ウェブページにビデオを挿入する方法の要約です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。編集者がすぐに返信します。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。