<video src="video.mp4" controls></video>上記の例では、"video.mp4"という動画ファイルを表示し、ビデオプレーヤーのコントロールを有効にします。
- 動画フォーマットのサポート: HTML5ビデオは、さまざまな動画フォーマットをサポートしています。一般的なフォーマットには、MP4、WebM、Oggなどがあります。以下は、複数のフォーマットをサポートする例です。
<video>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<source src="video.ogv" type="video/ogg">
</video>上記の例では、ブラウザがサポートする最初の動画フォーマットが再生されます。
- オートプレイとループ:
ビデオを自動再生させるには、
autoplay属性を使用します。また、ビデオをループ再生させるには、loop属性を使用します。以下は、オートプレイとループの例です。
<video src="video.mp4" autoplay loop></video>- ビデオのコントロール:
ビデオプレーヤーのコントロールをカスタマイズするには、
controls属性を使用します。以下は、カスタムコントロールを備えたビデオプレーヤーの例です。
<video src="video.mp4" controls>
<track kind="subtitles" src="subtitles.vtt" srclang="en" label="English">
<track kind="subtitles" src="subtitles.ja.vtt" srclang="ja" label="日本語">
</video>上記の例では、ビデオプレーヤーに英語と日本語の字幕トラックを追加しています。
- レスポンシブなビデオ: ビデオをレスポンシブにするには、CSSを使用してビデオコンテナを調整します。以下は、レスポンシブなビデオの例です。
<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%;"></video>
</div>上記の例では、ビデオコンテナのアスペクト比を維持しながら、ビデオを表示しています。
これらはHTML5ビデオの基本的な使用方法とコーディング例です。さまざまな属性やイベントを使用してさらに高度な操作も行えますが、ここでは基本的な要素を紹介しました。