自分用にメモ残し__φ(・x・

運営中のまとめサイトでも、クライアント先のウェブサービスサイトなどでも、動画ファイルを掲載する機会が増えたため、動画プレイヤーとして、HTML5導入時から使いやすくなった「video」タグを使用しているのですが、

videoタグ自体には、再生途中を自動的に記憶する機能はありませんヽ(・x・;)ノ

なので、ブラウザのクッキー情報に動画再生位置を記録させて、ページから離脱しても途中から再生できるJavaScriptをグーグル先生に作ってもらいました。

ソースコードがこちら(・∀・)つ◎

<video id="videoPlayer"></video>

まずは HTMLソース側のvideoタグに、JavaScriptで制御するための id要素「videoPlayer」を追加。

次にJavaScript。

// 動画要素を取得
const video = document.getElementById('videoPlayer');
// localStorageに保存されている再生位置のキー
const storageKey = 'videoPlaybackPosition';

// ページ読み込み時に保存された再生位置から再開
window.addEventListener('load', () => {
    const savedTime = localStorage.getItem(storageKey);
    if (savedTime) {
        // メタデータの読み込みが完了してからcurrentTimeを設定する
        video.addEventListener('loadedmetadata', () => {
            video.currentTime = parseFloat(savedTime);
        });
    }
});

// 動画の再生位置を定期的に保存 (例: 5秒ごと)
video.addEventListener('timeupdate', () => {
    localStorage.setItem(storageKey, video.currentTime.toString());
});

// ページを離れる直前にも保存を試みる (確実ではない場合もある)
window.addEventListener('beforeunload', () => {
    localStorage.setItem(storageKey, video.currentTime.toString());
});

こちらのソースコードを外部ファイル「rememberPlaybackPosition.js」としてサーバに設置して、動画ファイルを掲載しているページに読み込むだけ(・∀・)

以上です！