<video controls>
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>上記のコードでは、video.mp4 というファイル名のビデオファイルを再生します。もしブラウザがビデオ形式をサポートしていない場合は、"Your browser does not support the video tag." というメッセージが表示されます。
<video controls width="500" poster="thumbnail.jpg">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>上記のコードでは、プレーヤーの幅を500ピクセルに設定し、thumbnail.jpg というサムネイル画像を表示します。
- スタイリングとデザインのカスタマイズ: ビデオプレーヤーのスタイリングとデザインをカスタマイズするために、CSSを使用します。以下のコードをCSSファイルに追加して、ビデオプレーヤーの外観を変更します。
video {
border: 1px solid #ccc;
border-radius: 4px;
}
video:hover {
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}上記のコードでは、ビデオプレーヤーに枠線と丸い角を追加し、ホバー時に影を表示します。
これらの基本的な手法とコード例を使用して、HTML5を使用したカスタムビデオプレーヤーを作成する方法を説明しました。これを参考にして、自分のウェブサイトやアプリケーションに適したビデオプレーヤーを作成してください。