HTML - ビデオ要素

ウェブ開発志望者各位、こんにちは！今日はHTML5の中でも最もエキサイティングな要素の一つ、ビデオ要素について深く掘り下げます。オンラインでビデオを見るために第三者プラグインに依存していた時代を思い出しますか？その時代はこの便利な小さなタグのおかげで終わりを迎えました。では、一緒にこの旅に出発し、HTMLビデオ要素の力を解き放ちましょう！

HTML - Video Element

文法

面白い部分に飛び込む前に、基本的なことを從いましょう。HTMLビデオ要素は覚えやすいシンプルな文法を持っています：

<video src="movie.mp4" controls>
您のブラウザはビデオタグをサポートしていません。
</video>

これはビデオ要素の最も基本的な形です。これを分解してみましょう：

<video>: これはブラウザにビデオを埋め込むことを知らせるオープニングタグです。
src="movie.mp4": この属性はビデオファイルのソースを指定します。
controls: この属性はプレイヤーに再生コントロール（再生、停止、音量）を追加します。
オープニングタグとクロージングタグの間のテキストは、ブラウザがビデオ要素をサポートしていない場合に表示されます。

さて、あなたはおそらく「それで終わり？」と考えているかもしれません。実はそれだけではありません！この強力な要素でできることはもっとあります。さらに探求しましょう！

HTMLビデオ要素の例

例1: 基本的なビデオの埋め込み

<video src="cute_kitten.mp4" controls width="320" height="240">
申し訳ありません、您的ブラウザは埋め込まれたビデオをサポートしていません。
</video>

この例では、widthとheight属性を追加してビデオプレイヤーのサイズを制御しています。テレビを買うのと同じで、どれだけ大きなものが欲しいかを選べます！

例2: 複数のソースファイル

<video controls width="320" height="240">
<source src="cute_kitten.mp4" type="video/mp4">
<source src="cute_kitten.webm" type="video/webm">
<source src="cute_kitten.ogg" type="video/ogg">
您のブラウザはビデオタグをサポートしていません。
</video>

ここで興味深いことがあります！複数のビデオソースを<source>要素を使って提供しています。なぜ这么做るのでしょうか？ブラウザによってサポートしているビデオフォーマットが異なるためです。複数のソースを提供することで、できるだけ多くのブラウザでビデオが再生できるようにします。パーティーに違うお菓子を持っていくのと同じで、みんなに合ったものを用意します！

例3: 自動再生とミュート

<video src="background_video.mp4" autoplay muted loop>
您のブラウザはビデオタグをサポートしていません。
</video>

この例では、新しい3つの属性が導入されています：

autoplay: ビデオが準備でき次第自動で再生します。
muted: ビデオは音無しで再生されます。
loop: ビデオが終了すると再開します。

この組み合わせは、ウェブサイトのバックグラウンドビデオに最適です。ウェブページの背景でサイレントムービーが繰り返し再生されるのと同じです！

例4: ポスター画像

<video src="movie_trailer.mp4" controls poster="movie_poster.jpg">
您のブラウザはビデオタグをサポートしていません。
</video>

poster属性を使うことで、ビデオがダウンロード中やユーザーが再生ボタンを押すまでに表示される画像を指定できます。DVDのカバーのように、視聴者に予告を提供します！

異なるビデオフォーマットに対するブラウザのサポート

ブラウザサポートについて話しましょう。すべてのブラウザがすべてのビデオフォーマットをサポートしているわけではありません。複数のソースを提供することが重要な理由です。以下の表は、どのブラウザがどのフォーマットをサポートしているかを示しています：

ビデオフォーマット	Chrome	Firefox	Safari	Edge	Internet Explorer
MP4	はい	はい	はい	はい	はい (9+)
WebM	はい	はい	いいえ	はい	いいえ
Ogg	はい	はい	いいえ	いいえ	いいえ

MP4は最も広くサポートされていますが、WebMとOggのバージョンを含めることで、古いブラウザとの互換性を確保できます。

ベストプラクティス

controls属性を常に含めてください。それなしではユーザーがビデオの再生をコントロールできません。
複数のフォーマットのソースファイルを提供して、最大限のブラウザ互換性を確保します。
poster属性を使ってユーザーにビデオのプレビューを提供します。
自動再生には注意してください。バックグラウンドビデオには便利ですが、過度に使用するとユーザーに不快感を与える可能性があります。
ブラウザが要素をサポートしていない場合のフォールバックコンテンツを常に含めてください。

結論として、HTMLビデオ要素は、第三者プラグインに依存することなく簡単にビデオを埋め込むことができる強力なツールです。柔軟で広くサポートされており、使いやすいです。

忘れてはならないのは、ウェブ開発をマスターする鍵は練習です。さあ、ウェブページにビデオを埋め込んでみましょう！異なる属性を試してみて、どれが自分のニーズに最適かを見つけ出してください。誰かが次のウェブビデオストリーミングの大物になるかもしれません！

未来のウェブ魔術師たち、快くコーディングを続けましょう！

Credits: Image by storyset