HTML5で動画の再生速度を変更する方法【playbackRate活用ガイド】

HTML5で動画の再生速度を変更する方法

HTML5では、playbackRateプロパティを使用することで、音声や動画の現在の再生速度を自由に設定できます。さらに、defaultPlaybackRateプロパティを使えば、動画読み込み時のデフォルト（既定）の再生速度を指定することも可能です。

playbackRateとdefaultPlaybackRateの違い

playbackRateは、その時点での再生速度を動的に変更するプロパティです。一方、defaultPlaybackRateは、メディアが読み込まれたときの初期再生速度を決めるものです。一時的に速度を変えたい場合はplaybackRateを、最初から特定の速度で再生したい場合はdefaultPlaybackRateを使うとよいでしょう。

動画を3倍速で再生するコード例

以下のコードを実行すると、動画を3倍の速度で再生できます。

/* 動画を3倍速で再生 */
document.querySelector('video').defaultPlaybackRate = 3.0;
document.querySelector('video').play();

動画を2倍速で再生するコード例

次のコードは、playbackRateを使って動画を2倍の速度で再生する例です。

/* 動画を2倍速で再生 */
document.querySelector('video').playbackRate = 2;

補足：設定できる速度の範囲

多くのブラウザでは、0.25〜4.0程度の値をplaybackRateに設定できます。たとえば0.5を指定すれば半分の速度（スロー再生）になり、講義動画やチュートリアルの視聴などに便利です。ただし、対応範囲はブラウザによって異なる場合があるため、実装後は主要ブラウザでの動作確認を行うことをおすすめします。