動画ファイルの再生速度を速くしたり遅くする

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

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

通常の速度は「1.0」、それ以上の値の場合は早く再生し、0.9から0.1の値はスロー再生になります。
「0」は再生が止まって一時停止と同じ状態になります。
また、「-0.1」以下の負の値を設定すると逆再生になります（2020年11月現在はPC版Safari、モバイル版ChromeとSafariのみ対応）。

以下の例は「スロー」「通常」「早送り」「もっと早送り」の4つのボタンを用意して、それぞれのボタンを押すと再生速度を調整することができます。

サンプルページはこちら

HTML コード例

<article>
  <h1>JavaScriptレシピ</h1>
  <video type="video/webm" src="./movie/swiss.mov" controls></video>
  <button id="btn_slow">スロー</button>
  <button id="btn_normal">通常</button>
  <button id="btn_fast">早送り</button>
  <button id="btn_veryfast">もっと早送り</button>
</article>

CSS コード例

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

JavaScript コード例

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

  const videoElement = document.querySelector("video");
  const btn_slow = document.getElementById("btn_slow");
  const btn_normal = document.getElementById("btn_normal");
  const btn_fast = document.getElementById("btn_fast");
  const btn_veryfast = document.getElementById("btn_veryfast");

  btn_slow.addEventListener("click", (e) => {
    videoElement.playbackRate = 0.5;
  });

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

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

  btn_veryfast.addEventListener("click", (e) => {
    videoElement.playbackRate = 3.0;
  });
});

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

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

再生速度「0.5」は通常の半分の速度（スロー再生）、「2.0」は2倍速、「3.0」は3倍速です。

なお、playbackRateプロパティに設定できる値の許容範囲はブラウザによって異なります。
もし再生速度が極端に早かったり、遅い場合は通常再生になったり、自動的に消音設定になることがあります。

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

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