HTMLでのMP4ビデオの埋め込み方法

基本的な埋め込み方法:

<video src="video.mp4" controls></video>

上記のコードでは、src属性に埋め込むMP4ビデオのファイルパスを指定しています。controls属性を追加することで、ビデオプレーヤーに再生コントロールが表示されます。

サイズとオートプレイの指定:

<video src="video.mp4" width="640" height="360" autoplay></video>

上記のコードでは、width属性とheight属性を使用してビデオのサイズを指定しています。autoplay属性を追加することで、ビデオが自動的に再生されます。

キャプションの追加:

<video src="video.mp4" controls>
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
</video>

上記のコードでは、<track>要素を使用してキャプションを追加しています。src属性にはキャプションファイルのパスを指定し、srclang属性にはキャプションの言語を指定します。

レスポンシブなデザイン:

<div style="position: relative; padding-bottom: 56.25%; height: 0;">
  <video src="video.mp4" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" controls></video>
</div>

上記のコードでは、padding-bottomプロパティを使用してビデオのアスペクト比を維持し、レスポンシブなデザインを実現しています。

これらはいくつかの一般的な方法ですが、MP4ビデオを埋め込むためのさまざまなオプションがあります。詳細なカスタマイズやさらなる機能の追加については、HTML5のvideo要素に関するドキュメントを参照してください。