JavaScript

レシピ

動画

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

動画ファイルを逆再生する方法について解説します。この機能は2020年11月現在はPC版Safari、モバイル版SafariとChromeのみ対応しています。

この記事のポイント

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

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

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

通常の再生速度は「1.0」ですが、逆再生で通常の速度は「-0.1」を指定し、それより小さい値になるほど速い逆再生、「0」に近づくほどスローの逆再生になります。
動画ファイルの再生位置を戻すときに便利ですが、2020年11月現在はPC版Safari、およびモバイル版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プロパティに設定できる負の値の範囲はブラウザによって異なるため注意してください。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

コメントありがとうございます!
運営の参考にさせていただきます。