MP4動画をウェブページに表示するには

 MP4動画をウェブページに表示するには、HTML5の<video>タグを使用します。これはYouTubeのような動画プレイヤーを自作する最も簡単な方法です。

基本的なHTMLコード

以下は、最もシンプルで一般的な<video>タグのコード例です。

HTML

<video controls>
  <source src="your-video.mp4" type="video/mp4">
  お使いのブラウザは動画に対応していません。
</video>

---

コードの説明

• <video>タグ

  動画プレイヤーを作成する基本的な要素です。

• controls属性

  この属性を追加することで、再生、一時停止、音量調整、フルスクリーン表示などの標準的なコントロールボタンが表示されます。これがないと、動画は表示されますが操作できません。

• <source>タグ

  動画ファイルの場所（src）と形式（type）を指定します。複数の<source>タグを入れることで、異なるブラウザやデバイスに対応する複数の動画ファイル（例：.mp4、.webm、.ogg）を用意できます。ブラウザはリストの先頭から順に再生可能なファイルを探します。

• フォールバックテキスト

  <video>タグ内に書かれた「お使いのブラウザは動画に対応していません。」というテキストは、<video>タグをサポートしていない古いブラウザ向けのメッセージです。

---

その他の便利な属性

• autoplay

  ページが読み込まれたら自動的に動画を再生します。多くのブラウザでは、ユーザーエクスペリエンスを考慮して、音声なしの場合のみ自動再生が許可されます。

• loop

  動画が最後まで再生された後、自動的に最初から繰り返して再生します。

• muted

  動画の音声を最初からミュートにします。autoplayと組み合わせてよく使われます。

• poster

  動画が再生される前に表示されるサムネイル画像を指定します。poster="thumbnail.jpg"のように使用します。

• width と height

  動画プレイヤーの幅と高さをピクセル単位で指定します。例えば、width="640"とすると幅が640ピクセルになります。

これらの属性を組み合わせて、よりカスタマイズされた動画プレイヤーを作成できます。たとえば、自動再生でループするミュート動画は以下のようになります。

HTML

<video width="320" height="240" autoplay loop muted>
  <source src="your-video.mp4" type="video/mp4">
  お使いのブラウザは動画に対応していません。
</video>