動画ファイルの再生をスキップする

動画ファイルの再生位置を指定した秒数だけスキップさせて、早送りや巻き戻しする方法について解説します。

この記事のポイント

video要素の再生位置はcurrentTimeプロパティを参照する
currentTimeプロパティの値を変更すると再生位置を調整できる

動画ファイルの再生位置をスキップする

video要素は現在の再生位置をcurrentTimeプロパティに数値として持っています。

currentTimeプロパティの値は浮動小数点数です。
動画ファイルの再生位置を取得してコンソールに出力してみると以下のような値が表示されます。

コンソール出力例

整数部分は秒数、小数点以下はミリ秒以下の時間を表します。

ただし、小数点以下の精度はブラウザの種類やバージョンによって異なります。
2023年07月時点では、Chromeのバージョン114.0.5735.248やFirefoxのバージョン115.0.2ではマイクロ秒（0.000 001秒）単位ですが、Safariのバージョン16.5.2ではフェムト秒（0.000 000 000 000 001秒）単位の値が入っています。

主流のブラウザに対して足並みを揃えた対応を考えると、currentTimeプロパティの値を扱うときはマイクロ秒単位以上の数値を対象とすることをおすすめします。

今回は10秒単位で再生位置を進めたり、戻ることができるようにします。
以下の例は、動画の再生と一時停止に加えて「10秒前」ボタンと「10秒後」ボタンを設置して、それぞれのボタンを押したらcurrentTimeプロパティの値を変更して再生位置を進めたり戻すようにしています。
赤字の箇所が再生位置の調整に関するコードです。

サンプルページはこちら

Note

ここでは動画ファイルの再生／一時停止の実装については触れません。こちらについては別記事「動画ファイルの再生、一時停止を操作する」を参照してください。

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <video type="video/webm" src="./movie/swiss.mov"></video>
  <button id="btn_play">再生</button>
  <button id="btn_pause">一時停止</button>
  <button id="btn_back">10秒前</button>
  <button id="btn_forward">10秒後</button>
</article>

CSSはvideo要素とボタンの表示の並び方を整えるために記述します。

CSS コード例

video {
	display: block;
	margin-bottom: 20px;
}

JavaScript コード例

window.addEventListener('DOMContentLoaded', function(){

  const videoElement = document.querySelector("video");

  const btn_play = document.getElementById("btn_play");
  const btn_pause = document.getElementById("btn_pause");
  const btn_back = document.getElementById("btn_back");
  const btn_forward = document.getElementById("btn_forward");

  // 再生ボタンを押したとき
  btn_play.addEventListener("click", (e) => {
    videoElement.play();
  });

  // 一時停止ボタンを押したとき
  btn_pause.addEventListener("click", (e) => {
    videoElement.pause();
  });

  // 10秒前ボタンを押したとき
  btn_back.addEventListener("click", (e) => {
    videoElement.currentTime -= 10;
  });

  // 10秒後ボタンを押したとき
  btn_forward.addEventListener("click", (e) => {
    videoElement.currentTime += 10;
  });
});

id属性から「10秒前」ボタンと「10秒後」ボタンを取得して、それぞれクリックされたときに指定した処理を実行するようにイベントリスナーに登録します。

「10秒前」ボタンのbtn_backに対しては、videoElement.currentTimeの現在の再生位置から10を引いた10秒前の位置に設定します。

「10秒後」ボタンのbtn_forwardについては反対に再生位置を進めるため、videoElement.currentTimeの現在の再生位置に10を足して10秒後の位置に設定します。

このコードを実行して動画ファイルを再生してから上記2つのボタンを押すと、それぞれ再生位置を10秒単位で移動することができます。
もし5秒単位で移動させたい場合は上記の数値を10から5に、反対に20秒単位にしたいときは10を20に変更するだけで設定可能です。

動画ファイルの再生位置をスキップする