Prime Videoに｢5秒戻る｣｢90秒進む｣などのボタンを追加したらすごく快適になった

最近 Amazon Prime Video で「名探偵コナン」を最初から観ています。名探偵コナンは何年も放送しているのでシーズン数が凄いです。

名探偵コナン

Amazon Prime Video

コナンは最初の方しか知らなかったのですが、観てみると黒ずくめの組織との対決がほとんど無く、日常系アニメっぽい感じがあります。毛利小五郎は麻酔中毒になりそう。麻酔って耐性とかできるのでしょうか。

これまで観たところまででは、シーズン13はほとんどのエピソードが組織との対決の話で一番面白かったシーズンです。

さて、エピソードを連続で観ていると、オープニング曲とエンディング曲をスキップしたくなります。

「名探偵コナン」は構成がいやらしく、エンディング曲の後に後日談があるのでエンディング曲の前に次のエピソードに移ることができません。

今でも以前紹介した倍速設定にする拡張機能「Video Speed Controller」を使っていてこれにもスキップ機能があるのですが、設定したキーを押さないとスキップできません。

スキップするのにキーを押す必要があるということは、Prime Video を観ているウィンドウをアクティブにしないとキーを押しても意味がありません。ウィンドウをアクティブにするのが面倒です。

ということで、スキップボタンを作ってみました。

本来は「+10秒、ポーズ、-10秒」と3つのボタンしか無いのですが、「-5秒、+5秒、+90秒」ボタンを追加しました。

直前のシーン見返したい時に 5秒戻る。10秒戻るボタンでは戻りすぎてしまい不便でした。

オープニング曲とエンディング曲はとりあえず 90秒進むボタン。曲によって終わるまでの時間が違うのでとりあえず 90秒に設定しています。他のスキップボタンで微調整。

JavaScript で作るわけですが、ボタンを作ること自体は簡単です。

難しいのは Prime Video の機能との兼ね合い。例えば自分で増やしたボタンをクリックすると映像が停止されることがあり、これは Prime Video の画面クリックで再生がポーズされる機能で、これに対処しなければなりません。

さらに、先の方へスキップした場合バッファ中に映像を再生してもポーズのままで、バッファを待たねばなりません。最初は setInterval() と readyState でチェックしていたのですが、できれば setInterval() を使いたくない。

調べてみると動画の再生にはイベントがあり、"データの読み込みが終わった時" の "onloadeddata" があります。これを使ってみたのですがうまく動作しませんでした。

なので他のイベントに切り替えました。"canplaythrough" と "canplay" があります。このどちらでも動作したのですが、"canplaythrough" だと「映像の終わりまでバッファ待ちすること無くデータを読み込める時」という意味で、"canplay" よりもチェックしている時間軸が遠いです。今のところ "canplay" にしています。

今回一番難しかったのは、実はボタンの表示・非表示でした。

最初は CSS で hover を使って表示すれば良いかなと考えて作ったのですが、それですとマウスが映像画面から出ない場合（フルスクリーン時も）に、自動的にボタンが非表示になりません。

なので JavaScript で解決することにしました。Prime Video の JavaScript では最初からあるボタンはそのまま表示・非表示が切り替わるのですが、要素を決め打ちしているので、後から追加したボタンにはイベントハンドラーが登録されません。面倒ですが自力で表示・非表示を切り替えます。

作った JavaScript を公開しようと思ったのですが、公開の方法が面倒そう。User Script に慣れた人なら良いですがそれ以外の人は訳が分からなそうですし、拡張機能として公開するのはそれについて調べる労力が掛かりすぎます。

Abema も弄って快適になりましたが、不便なところを少し弄ると随分快適になりますね。

というか公式の機能で最初からこのボタンが欲しいのですが…。

AbemaのCM時に自動で音量を下げるようにしたらとても快適。コメント表示への切り替えも自動で