はじめに
この実験では、<video> タグを使ってHTMLに動画要素を埋め込み、カスタマイズする方法を学びます。動画コントロールの追加、動画ソースの設定、カスタムサムネイルの実装、さまざまな動画タグ属性の確認など、インタラクティブな動画プレーヤーを作成するための基本的な手法を扱います。
手順に沿って学習を進めながら、HTML5で動画を埋め込む実践的なスキルを身につけます。基本的な動画要素の作成から始め、複数の動画ソースの追加、再生設定の制御、カスタムサムネイルの設定へと進みます。最終的には、Webページ内でより使いやすく魅力的な動画体験を作成できるようになります。
コントロール付きの基本的な動画要素を作成する
このステップでは、基本的なコントロールを備えた動画要素をHTMLで作成します。HTML5には、動画をWebページへ直接埋め込める、シンプルで強力な<video>タグがあります。
まず、動画の埋め込みを確認するHTMLファイルを作成します。WebIDEを開き、~/projectディレクトリにvideo-demo.htmlという新しいファイルを作成してください。
touch ~/project/video-demo.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Basic Video Element</title>
</head>
<body>
<h1>My First Video Element</h1>
<video controls width="640" height="360">
Your browser does not support the video tag.
</video>
</body>
</html>
動画要素の主な構成を確認しましょう。
<video>タグ：動画コンテンツを埋め込むための主要なコンテナcontrols属性：標準の動画プレーヤーコントロール（再生、一時停止、音量）を追加width属性とheight属性：動画プレーヤーのサイズを設定- タグ内のテキスト：HTML5動画に対応していないブラウザに表示する代替メッセージ
controls属性は、再生、一時停止、音量調整、全画面表示など、標準的な再生コントロールをユーザーに提供する重要な属性です。
注：詳しくは、WebIDEでHTMLファイルをプレビューする方法を参照してください。
動画ソースを追加し、ミュート状態で再生する
このステップでは、HTMLの動画要素に動画ソースを追加し、初期再生状態を設定する方法を学びます。先ほど作成したvideo-demo.htmlファイルを変更し、動画ソースを指定して、動画をデフォルトでミュートする方法を確認します。
WebIDEで~/project/video-demo.htmlファイルを開き、内容を次のように更新してください。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Video Source and Mute</title>
</head>
<body>
<h1>Video with Multiple Sources</h1>
<video controls width="640" height="360" muted>
<source
src="sample-video.mp4"
type="video/mp4"
/>
<source
src="sample-video.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</body>
</html>
追加した内容を確認しましょう。
<source>タグ：複数の動画形式を指定し、ブラウザ間の互換性を確保できます。- 1つ目のソースはMP4ファイルです。
- 2つ目のソースはWebMファイル（代替形式）です。
- ブラウザは再生できる最初の形式を使用します。
muted属性：動画の読み込み時に自動的にミュートします。- 予期しない音声の再生を防ぐ場合に便利です。
- デフォルトで音声を再生したい場合は削除できます。
type属性：動画ソースのMIMEタイプを指定します。- ブラウザがその動画を再生できるかどうかを判断するのに役立ちます。
セットアップスクリプトは、サンプル動画ファイルをローカルに2つ作成します。そのため、外部の動画ホストに依存せずに例を動作させることができます。実際の用途では、これらを独自の動画ファイルのパスに置き換えます。
カスタムサムネイル用の動画ポスターを設定する
このステップでは、poster属性を使って、再生開始前に動画要素へカスタムサムネイル画像を表示する方法を学びます。まず、ポスター画像として使うサンプル画像をダウンロードします。
次のコマンドを実行して、サンプル画像をダウンロードしてください。
wget https://placehold.co/640x360.png?text=Video+Thumbnail -O ~/project/video-thumbnail.png
次に、poster属性を追加して~/project/video-demo.htmlファイルを更新します。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Video with Custom Poster</title>
</head>
<body>
<h1>Video with Custom Thumbnail</h1>
<video controls width="640" height="360" muted poster="video-thumbnail.png">
<source
src="sample-video.mp4"
type="video/mp4"
/>
<source
src="sample-video.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</body>
</html>
poster属性のポイントを確認しましょう。
- 動画の再生が始まる前にカスタム画像を表示します。
- プレビューとして表示される動画の最初のフレームを置き換えます。
- より魅力的なユーザーインターフェースの作成に役立ちます。
- ローカル画像ファイルとリモート画像ファイルの両方に対応します。
ポスター画像を使うと動画内容を事前に確認できるため、再生開始前に内容を伝え、ユーザー体験を向上させられます。
動画タグの属性と設定を確認する
このステップでは、HTML5の動画要素で利用できるさまざまな属性と設定を詳しく確認します。~/project/video-demo.htmlファイルを更新し、次の高度な設定を試してください。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Advanced Video Configurations</title>
</head>
<body>
<h1>Exploring Video Tag Attributes</h1>
<video
controls
width="640"
height="360"
muted
poster="video-thumbnail.png"
preload="metadata"
loop
playsinline
>
<source
src="sample-video.mp4"
type="video/mp4"
/>
<source
src="sample-video.webm"
type="video/webm"
/>
Your browser does not support the video tag.
</video>
</body>
</html>
追加した属性を確認しましょう。
preload="metadata"：- 再生前に動画をどのように読み込むかを制御します。
- オプション：
auto（動画全体を読み込む）、metadata（メタデータのみ読み込む）、none（先読みしない）
loop：- 動画の再生終了後に自動的に最初から再生します。
- 背景動画や繰り返しコンテンツに便利です。
playsinline：- モバイルデバイスで動画をインライン再生できるようにします。
- iOSデバイスで自動的に全画面表示になるのを防ぎます。
さらに、次の便利な属性も試せます。
autoplay：動画の再生を自動的に開始します。crossorigin：クロスオリジンの動画ソースを処理します。disablepictureinpicture：ピクチャーインピクチャーモードを無効にします。
ヒント：
- すべてのブラウザがすべての属性に対応しているわけではありません。
- さまざまなデバイスとブラウザで必ずテストしてください。
autoplayやloopを使うときは、ユーザー体験を考慮してください。
動画の再生体験を向上させる
このステップでは、カスタムコントロールとスタイルを追加して、動画の再生体験を向上させます。~/project/video-enhanced.htmlという新しいファイルを作成し、次の内容を記述してください。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Enhanced Video Player</title>
<style>
.video-container {
max-width: 640px;
margin: 0 auto;
position: relative;
}
.custom-controls {
display: flex;
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 10px;
}
.custom-controls button {
background: none;
border: none;
color: white;
margin-right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="video-container">
<video id="myVideo" width="640" height="360" poster="video-thumbnail.png">
<source
src="sample-video.mp4"
type="video/mp4"
/>
Your browser does not support the video tag.
</video>
<div class="custom-controls">
<button onclick="togglePlay()">Play/Pause</button>
<button onclick="muteToggle()">Mute/Unmute</button>
<input
type="range"
min="0"
max="100"
value="50"
onchange="changeVolume(this.value)"
/>
</div>
</div>
<script>
const video = document.getElementById("myVideo");
function togglePlay() {
if (video.paused) {
video.play();
} else {
video.pause();
}
}
function muteToggle() {
video.muted = !video.muted;
}
function changeVolume(value) {
video.volume = value / 100;
}
</script>
</body>
</html>
CSSやJavaScriptが初めてでも心配ありません。この例では、カスタム動画コントロールを作成し、動画プレーヤーのインターフェースをスタイル設定する基本的な方法を示しています。
この例で追加した主な機能は次のとおりです。
カスタム動画コントロール：
- 再生／一時停止ボタンとミュートボタンを備えたカスタムコントロールパネルを作成します。
- 音量を細かく調整するスライダーを追加します。
CSSによるスタイル設定：
- 動画コンテナとコントロールのスタイルを設定します。
- レイアウトにFlexboxを使います。
- コントロールに半透明の背景を追加します。
JavaScriptによる操作：
togglePlay()：動画の再生／一時停止を手動で切り替えます。muteToggle()：動画のミュート状態を切り替えます。changeVolume()：プログラムから動画の音量を調整します。
この方法では、ブラウザ標準のコントロールを使う場合と比べて、動画プレーヤーのインターフェースを柔軟に設計できます。
まとめ
この実験では、<video>タグを使ってHTMLに動画要素を埋め込み、カスタマイズする方法を学びました。基本的なコントロールの追加、複数の動画ソースの指定、再生設定の構成など、インタラクティブな動画プレーヤーを作成するための基本的な手法を扱いました。動画のサイズ設定、代替コンテンツの実装、標準プレーヤーコントロールの追加、動画のミュートとソース選択の管理といったスキルも身につけました。
標準の再生／一時停止コントロール、幅と高さの設定、さまざまな動画形式への対応など、実用的なHTML5動画の埋め込み方法を使って、デモ動画要素を作成しました。動画タグの属性を理解し、さまざまな設定によって埋め込んだ動画コンテンツとのユーザー操作を向上させる実践的な経験も得られました。
