導入
Webサイトに動画や音声を埋め込む際、単に再生するだけでなく「ユーザーがどこまで視聴したか」を把握したい場面は多々あります。例えば、動画の離脱率分析や、学習コンテンツの未視聴区間の特定などです。HTMLMediaElementのplayedプロパティを活用すれば、ブラウザが実際に再生した区間を正確に取得できます。この記事では、このプロパティを使って再生済み範囲を追跡する実践的な手法を解説します。
基礎知識
playedプロパティは、HTMLMediaElement（video要素やaudio要素）が持つ読み取り専用のプロパティです。このプロパティにアクセスすると、TimeRangesオブジェクトが返されます。
TimeRangesオブジェクトは、再生された区間（開始時間と終了時間）のリストを保持しており、ユーザーがシーク（早送り・巻き戻し）を行って飛び飛びに再生した場合でも、それぞれの再生区間を個別に管理できるのが特徴です。
実装/解決策
playedプロパティから情報を取得する際は、単にプロパティを参照するだけでなく、timeupdateイベントなどを利用して、再生中に随時データを更新・蓄積していくのが一般的です。TimeRangesオブジェクトには、`length`（範囲数）や`start(index)`、`end(index)`といったメソッドが用意されており、これらを使って再生履歴を計算します。
サンプルプログラム
以下のコードは、動画の再生が終了したタイミングで、合計でどの程度の範囲を視聴したかをコンソールに出力するサンプルです。
const video = document.querySelector('video');
// 再生終了時に視聴済み区間を表示するイベントリスナー
video.addEventListener('ended', () => {
const played = video.played; // TimeRangesオブジェクトを取得
console.log('--- 視聴済み区間一覧 ---');
// played.lengthで再生した回数（区間数）を確認
for (let i = 0; i < played.length; i++) {
const start = played.start(i); // 区間の開始時間
const end = played.end(i); // 区間の終了時間
console.log(`区間 ${i + 1}: ${start.toFixed(2)}秒 〜 ${end.toFixed(2)}秒`);
}
});
応用・注意点
現場で活用する際、以下のポイントに注意してください。
1. シークによる断片化
ユーザーが動画の途中でシークバーを動かすと、playedプロパティ内のTimeRangesは新しい区間として追加されます。そのため、「合計で何秒再生したか」を知りたい場合は、単に`end`を見るのではなく、各区間の差分（`end - start`）を合算する処理が必要です。
2. 再生イベントのタイミング
`played`プロパティが更新されるのは、実際に再生が行われた後です。初期状態やロード直後では値が空（lengthが0）であるため、必ずイベントリスナー内で呼び出すように設計してください。
3. データ送信のタイミング
解析ツールにデータを送る場合は、`ended`イベントだけでなく、`pause`イベントやページ離脱時の`beforeunload`イベントを併用して、データの取りこぼしを防ぐのが堅実です。
playedプロパティは非常にシンプルですが、ユーザー体験の改善やコンテンツの質向上を測る上では欠かせない強力なAPIです。ぜひプロジェクトに組み込んでみてください。
コメント