【JavaScript入門】HTML5とマルチメディア処理
HTML5 では <video> タグを中心に ブラウザだけで動画を再生・制御 できます。ここでは「再生／一時停止・シーク・時間表示」を備えた 最小プレーヤー を例に、動画要素の主要メソッドとイベントを整理します。Canvas など他のマルチメディア API は次のコンテンツ以降で扱うため、ここでは 動画操作にフォーカス します。
１．<video> 要素 API 早見表
| 分類 | 名称 | 説明 | 代表的な用途 |
|---|---|---|---|
| プロパティ | currentTime | 現在の再生位置（秒） | 進捗バー・シーク |
| 〃 | duration | 総再生時間（秒） | 全体時間の表示 |
| 〃 | volume / muted | 音量 0–1 / ミュート | ボリューム調整 |
| メソッド | play() | 再生開始 | 再生ボタン |
| 〃 | pause() | 一時停止 | 停止ボタン |
| 〃 | requestFullscreen() | フルスクリーン化 | 全画面切替 |
| イベント | timeupdate | 再生位置が更新 | 経過タイム表示 |
| 〃 | ended | 再生完了 | 次動画へ自動切替など |
２．サンプル：かんたん動画プレーヤー
動画ファイル： sample.mp4
以下の動画ファイルをダウンロードして、「video-player.html」と同じ場所に保存してください。
ファイル名： video-player.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>🕹️ Mini Video Player</title>
<style>
body {
font-family:"Segoe UI",sans-serif;
background:#f4fbff;
margin:2rem;
}
h1 {
text-align:center;
font-size:1.6rem;
margin-bottom:1rem;
}
/* 1. video をブロック要素にし、左右マージン自動で中央揃え */
video {
display: block;
margin: 0 auto 1rem; /* 下に余白を追加 */
border:1px solid #ccc;
border-radius:6px;
}
/* 2. ボタン群を中央揃え */
#controls {
text-align: center;
margin-bottom: .8rem; /* ボタンと info の間に余白 */
}
#controls button {
padding:.5rem 1rem;
margin:0 .4rem; /* 左右だけマージン */
border:none;
border-radius:6px;
background:#0078d4;
color:#fff;
font-weight:bold;
cursor:pointer;
}
#controls button:hover {
opacity:.85;
}
/* 3. info / status も中央揃え */
#info,
#status {
text-align: center;
font-size: .9rem;
margin-top: .4rem;
}
</style>
</head>
<body>
<h1>🕹️ Mini Video Player</h1>
<video id="movie" width="420" height="260">
<source src="sample.mp4" type="video/mp4">
</video>
<!-- ボタン群に id="controls" を追加 -->
<div id="controls">
<button id="btnPlay">再生</button>
<button id="btnPause">一時停止</button>
<button id="btnBack">⏪ -2s</button>
<button id="btnFwd">⏩ +2s</button>
</div>
<div id="info">現在 0 / 0 秒</div>
<div id="status">ステータス: 待機中</div>
<script>
// DOM 準備完了
window.addEventListener('DOMContentLoaded', () => {
const v = document.getElementById('movie');
const timeEl = document.getElementById('info');
const statEl = document.getElementById('status');
// 再生
btnPlay.onclick = () => {
v.play();
statEl.textContent = 'ステータス: 再生中';
};
// 一時停止
btnPause.onclick = () => {
v.pause();
statEl.textContent = 'ステータス: 一時停止';
};
// -2 秒
btnBack.onclick = () => v.currentTime = Math.max(v.currentTime - 2, 0);
// +2 秒
btnFwd.onclick = () => v.currentTime = Math.min(v.currentTime + 2, v.duration);
// 時間表示を更新
v.addEventListener('timeupdate', () => {
timeEl.textContent =
`現在 ${v.currentTime.toFixed(1)} / ${v.duration.toFixed(1)} 秒`;
});
// 再生終了
v.addEventListener('ended', () => {
statEl.textContent = 'ステータス: 再生終了';
alert('動画が終了しました！');
});
});
</script>
</body>
</html>ブラウザの出力例
実行イメージ
- 再生 を押すと動画が開始し、情報欄が「ステータス: 再生中」に変わる。
- 再生バーの更新に合わせて 現在 / 全体 時間が 0.1 秒単位で進む。
- ⏪ -2s / ⏩ +2s で任意位置へ即ジャンプ。
- 終了後はアラートが表示され、ステータスが「再生終了」に。
３．プログラム解説
| ステップ | 処理内容 | 補足 |
|---|---|---|
| ① 要素取得 | document.getElementById で <video> と表示用要素を取得 | すべての制御は変数 v を通じて行う |
| ② 再生/停止 | .play() と .pause() をボタンにバインド | Promise を返すためエラー処理も可能 |
| ③ シーク | currentTime ± 2 秒を書き込むだけ | 範囲外は Math.max / min で補正 |
| ④ 時間表示 | timeupdate イベントで currentTime と duration を取得 | 進捗バー実装時も同イベントを利用 |
| ⑤ 終了検知 | ended イベント | 連続再生や次動画ロードのトリガーに使える |
まとめ
<video> タグと数行の JavaScript で オリジナル再生コントロール が簡単に作れます。
覚えるべきポイントは
.play()/.pause().currentTime/.durationtimeupdate/endedイベント
の３セットだけ。次章では<canvas>と組み合わせ、フレーム加工や
リアルタイムエフェクトを加えた インタラクティブ動画 へ発展させていきましょう。