videoタグを使った動画再生で、再生位置の記憶とレジューム再生を実現する

現在の再生位置の取得と設定

videoタグで再生中の動画の現在の再生位置は、javascriptからcurrentTimeというプロパティを参照することで、取得＆設定することができます。

例えば、下記のようなタグを書いていた場合、動画の再生位置の取得と設定は以下のようなjavascript(jQuery使用)で記述できます。

video.html

<video id="video" src="..."></video>

video.html

<script>
// 再生位置の取得（単位は秒）
console.log($('#video').get(0).currentTime);

// 再生位置の設定
$('#video').get(0).currentTime = 120;
</script>

再生位置が更新されたことを検出する

動画の再生中やシークバーで再生位置を変更したときなど、再生位置が更新されたばあい、更新されるたびに timeupdate というイベントが発生します。
このイベントをjavascriptでフックすることで、現在の再生位置をリアルタイムに取得し、それに対して何らかの処理を行うことができるようになります。

video.html

<script>
$(function() {
  $('#video').on('timeupdate', function() {
    var $(this).currentTime;
    
  });
});
</script>

イベントの発生タイミング

timeUpdateイベントは、再生中はかなり短い間隔で発火します（chrome系ブラウザでは0.2〜0.3秒ごとにイベントが発火していました）。また、再生中、停止中にシーク（スライドバーで動画の再生位置を更新した場合）したときにも即時発火します。

再生位置を保存、復元できるようにする

動画の再生位置の保存は、ウェブブラウザ飲みの機能で完結させるのであれば、cookieに保存するのがかんたんかと思います。

jquery cookieを使えば、以下のようなコードで実現できます。

video.html

<script>
$(function() {
  $('#video').get(0).currentTime = $.cookie("video_play_position");
  $('#video').on('timeupdate', function() {
    // 動画の再生位置を記憶する
    $.cookie("video_play_position", $(this).currentTime, { expires: 7 });
  });
});
</script>

情報をcookieに保存しているので、動画再生に使用しているブラウザを途中で変えた場合（例えば、PCで見ていた動画の続きをスマホで見る場合など）などには、このやり方では当然対応できません。

そのようなことをやる場合は、サーバ側にAPIなどを用意し(例えば、https://{hostname}/api/updatePlayTime?video_file_name={video_file_name}&time={time} など）、updateTimeイベント発火時に、動画の再生位置をapi呼び出しを通じてサーバに通知し、サーバ側で最後の再生位置をRDBなどに記憶しておき、ページロード時には最後の再生位置を復元するために、cookieやquery parameterなどで保存している再生位置をクライアントに通知するなどの大雨が必要になります。