📌 1. はじめに
「Webサイトに動画を埋め込みたいけど、どうすればいい？」
そんな疑問を持っている方向けに、HTMLの<video>タグを使って動画を表示する方法を解説します！
「YouTubeの埋め込みじゃなくて、オリジナルの動画をWebページに載せたい！」という方におすすめです。
📌 2. HTMLの<video>タグとは？
HTML5で導入された**<video>タグ**を使うと、動画ファイルを直接Webページに埋め込めます。
✅ YouTubeなどの外部サービスを使わずに、オリジナル動画を表示できる！
✅ 自分のサーバーに動画をアップロードすれば、完全にカスタマイズ可能！
📌 3. 基本的なHTMLコード
まずは、シンプルな<video>タグの基本構文を見てみましょう。
<video width="600" controls> <source src="sample.mp4" type="video/mp4"> お使いのブラウザは動画タグをサポートしていません。 </video>
📌 解説
width="600" → 動画の幅（ピクセル単位）
controls → 再生・停止ボタンなどのコントロールバーを表示
<source> → 動画ファイルのパスと形式を指定
type="video/mp4" → 動画のフォーマット（MP4, WebM, Ogg など）
これだけで、ページに動画を表示できます！
📌 4. 自動再生・ループ・ミュートの設定
<video>タグには、自動再生やループ再生を設定するオプションがあります。
<video width="600" autoplay loop muted> <source src="sample.mp4" type="video/mp4"> </video>
📌 各属性の解説
autoplay → ページを開いたときに自動再生
loop → 動画を繰り返し再生
muted → 音声をミュート（自動再生にはミュートが必須！）
📌 5. 複数の動画フォーマットに対応
ブラウザによって対応する動画フォーマットが異なるため、複数のフォーマットを用意するのがベスト！
<video width="600" controls> <source src="sample.mp4" type="video/mp4"> <source src="sample.webm" type="video/webm"> <source src="sample.ogv" type="video/ogg"> お使いのブラウザは動画タグをサポートしていません。 </video>
📌 MP4はほとんどのブラウザで対応しているので、基本的にMP4でOK！
📌 WebMやOggも用意すれば、より幅広い環境で再生可能！
