動画ファイルを逆再生する

動画ファイルの逆再生について

動画ファイルの逆再生はvideo要素のplaybackRateプロパティに負の値を設定することでできます。

通常の再生速度は「1.0」ですが、逆再生で通常の速度は「-0.1」を指定し、それより小さい値になるほど速い逆再生、「0」に近づくほどスローの逆再生になります。
動画ファイルの再生位置を戻すときに便利ですが、2023年07月現在はPC版Safari、およびiOS版ChromeとSafariのみ対応のため使用には注意が必要です。

以下の例は「巻き戻し 2倍速」「巻き戻し」「通常」の3つのボタンを用意して、それぞれのボタンを押すと再生速度を調整することができます。

サンプルページはこちら

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <video type="video/webm" src="./movie/swiss.mov" controls></video>
  <button id="btn_reverse2">巻き戻し 2倍速</button>
  <button id="btn_reverse">巻き戻し</button>
  <button id="btn_normal">通常</button>
</article>

CSS コード例

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

JavaScript コード例

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

  const videoElement = document.querySelector("video");
  const btn_reverse = document.getElementById("btn_reverse");
  const btn_reverse2 = document.getElementById("btn_reverse2");
  const btn_normal = document.getElementById("btn_normal");

  btn_reverse.addEventListener("click", (e) => {
    videoElement.playbackRate = -1.0;
  });

  btn_reverse2.addEventListener("click", (e) => {
    videoElement.playbackRate = -2.0;
  });

  btn_normal.addEventListener("click", (e) => {
    videoElement.playbackRate = 1.0;
  });
});

ページの読み込みが完了したタイミングでquerySelectorメソッドからvideo要素を取得して、変数videoElementに入れます。
それぞれのボタンについてはid属性を使って取得して対応する変数に入れておきます。

続いて、3つのボタンに対してクリックされたときに発生するイベント「click」をイベントリスナーに登録します。
クリックされるとvideo要素のplaybackRateプロパティに対して、再生速度の値を設定する処理のみ行います。

値が「-1.0」は通常速度の逆再生、「-2.0」は2倍速の逆再生、そして「1.0」は通常の再生です。

なお、playbackRateプロパティに設定できる負の値の範囲はブラウザによって異なるため注意してください。