Videoタグで埋め込まれた動画の再生スピードを変えたい

今回は、ウエブ上に置かれている動画の操作について、ちょっとしたやり方を書きます。自分自身へのメモ代わりです。

動画の再生

インターネット上の動画コンテンツは以前はFlashというプラグインを利用して閲覧することが多かったのですが、最近はvideoタグというHTML5のオブジェクトとして埋め込まれることが多くなりました。例えばYou Tubeの動画も多くはこのvideoタグとして埋め込まれているようです。そして、動画の内容によっては、少し早く再生したい、または遅く再生したいということがありますよね。 You Tubeには再生スピードをコントロールする機能が付いていますが、0.25倍、0.5倍、1.25倍、1.5倍、2倍といったように「あと少し早くまたはゆっくり」という変更ができません。今回紹介する方法は、任意の倍率で再生スピードを変えられます。

1. 再生したい動画を表示する

まずは再生したい動画を表示しましょう。

2. Consoleウインドウを開く

Chromeでしたら、右上のメニューから「その他のツール」→「デベロッパーツール」をクリックするとConsoleウインドウが開きます。

3. videoタグのplaybackRage属性を上書きする

以下のコードでvideoタグのオブジェクトの再生スピードを変更できます。以下の例では再生スピードを２倍にしています。2を任意の数字にかえることで、好きな再生速度に設定できます。

document.querySelector('video').playbackRate = 2;

これで動画の再生スピードを変えられます。

おまけ

ここまで紹介しておいてから、ここのおまけとして書くのは少しおかしいのですが、実は、このやり方がうまくいかないこともあります。私の場合mac版のChromeで一部のvideoタグに埋め込まれた動画について上記操作をしても何も変更できないことがあります。どうやら、document.querySelector('video')の段階で参照すべきオブジェクトが拾えていないようです。この対処法として、ビデオが再生されている画面を二本指クリック（右クリック）して、「検証」を押すと、上記と同様にデベロッパーツールが開きます。これをしてからだと、上記の操作が思った通りに動きました。うまくいかないという方はこちらも試してみてください。