AWS Training の動画を早送りしたい

この記事に必要な範囲で自己紹介すると、

• 最近 AWS の勉強をはじめた
• とりあえず AWS Training を進めている
• リアルの会話はゆっくりのほうが嬉しいし、自分自身の喋りはとろい
  • （何でもかんでも早送りにしたい人ではない、ということです）

という感じです。

AWS Training とは

AWS が公式に提供してくれている学習用リソースです。まだ始めたばかりでよく分かっていませんが、ブラウザでアクセスして、動画を見ながら勉強できます。様々なコンテンツが準備されていて、興味のあるものを選ぶことができます。

しかし、動画に早送り機能がありません。速く進めたいけど途中に重要な情報があるかもしれないから飛ばしたくはない、という場合に困ってしまいます。

ページの要素を調べる

AWS Training のページ構成はコンテンツによって異なりますが、いくつか見た感じでは、<video> 要素として動画が配置されているという点は共通しているようです。<video> 要素の interface は HTMLVideoElement で、これは HTMLMediaElement を継承しています。そして、HTMLMediaElement の playbackRate プロパティで再生速度を制御することができます。

開発ツールを開き、コンソールで下記を実行すれば、再生速度が 1.25 倍になります。

const videos = document.body.getElementsByTagName("video");
videos[0].playbackRate = 1.25;

注意点

• 自分が確認に使ったブラウザは Firefox です。
• コンテンツによっては、<video> 要素が複数存在する場合があります。メインの動画が一番前にある可能性が高そうですが、確認した訳ではないので断言できません。videos のインデックスを 0 から変更する必要が生じるかもしれません。
• コンテンツによっては、動画のスピードを変えても seek bar の速度が変わりません。その結果、実際の動画と seek bar にずれが生じてしまいます。このずれの解消にはソースのスクリプトを変更する必要がありそうなので、あきらめました。

おわりに

ブラウザの開発ツールは、アプリケーションをつくるときだけでなく、日々の生活をちょっと便利にするためにも使えるんだと改めて感じました。