Prime Videoに倍速機能を持たせたい

春の大型連休あたりからPrime Videoでワンピースを見始めてはや1ヶ月（正確にはドラム島のチョッパーが合流するところまでは2年くらい前に見ていた）

ようやくゾウ編まで辿り着きました。

という話を先日、大学からの友人に話したところ、「いや早すぎだしそもそもPrimeって倍速機能とかないのにどうやったの？」と聞かれました。

雑談

ワンピース、良いですよね。

とはいえ、あれ、長いんですよ。

1話あたり24分、振り返りや予告を飛ばしても18分くらいかかるものが今や1000話くらい。

私が見始めたドラム島編は90話で今見ているゾウ編は760話あたりなので、1ヶ月で670話=201時間くらいになります。

もちろん1日中見続ければ10日間くらいでいけるかもしれませんが、私は文明人なので他にもしなければならないことがたくさんある。

「そうだ、倍速機能使おう」

とはいえPrime Videoには倍速がない。

最近はSPY FAMILYとかも見ているので、やはり私のPrime Videoへの執着レベルは間違っている。は？

そこで私はワンピースという巨象に立ち向かうべく、なんとしてもPrime VideoをPC版のChromeでいじくり回して倍速機能を実現しました。

まあ実際はChrome拡張機能にあるらしいのですが、私はキーボードで操作したいなあということもあって、またしもて拡張機能を自作しました。

環境

• MacBook Pro 2021
• Chrome 102.x
• JavaScript
• Chrome拡張機能マニフェストバージョン3

完成するもの

• キーボード操作によるPrime Videoの倍速機能を実現するための拡張機能

ただし、MacBook Proのスペックをもってしても、高速インターネット（速いときは600Mbpsくらい）を持ってしても、7倍速が限界です。

とはいえNetflixや他の大手動画サービスの表に出ているコマンドは2倍速までしかないので、割と快適に使えます。

コード

またしても拡張機能の登録はこのQiitaの記事を参考にします。

ちなみにディレクトリーツリーはこんな感じ。

Tools/FasterVideo
├── content.js
├── jq.js
└── manifest.json

jq.jsというのは、jQueryのウェブページの中にあるこれです。

CDNでしてもよいのですが、別にこだわりはなかったので、そのままダウンロードして使っています。

manifest.jsonの中身はこれです。

{
  "name"            : "FasterVideo",
  "version"         : "1.0.0",
  "description"     : "faster prime video",
  "manifest_version": 3,
  "content_scripts" : [{
    "matches": [
      "https://www.amazon.co.jp/gp/video/detail/*"
    ],
    "js"     : [
      "jq.js",
      "content.js"
    ]
  }],
  "author": "withcation.com"
}

matchesの中身はもっとちゃんと書いたほうが良いとは思いますが、即席レベルならこれで使えました。

content.jsはこのように書きます。

setTimeout(function () {
  let video = document.querySelectorAll("video")[0]
  video.playbackRate = 4;
  $(window).keydown( function (e) {
    switch(e.key) {
      case 'n':
        let div = $('div.atvwebplayersdk-nextupcard-button')[0]
        if (div) div.click()
        else $('button.atvwebplayersdk-nexttitle-button')[0].getElementsByTagName('div')[1].click()
        break
      case 'l': case 'd': video.currentTime += 10; break
      case 'L': case 'D': video.currentTime += 60; break
      case 'j': case 'a': video.currentTime -= 10; break
      case 'j': case 'A': video.currentTime -= 60; break
      case 'k': case 's': video.paused ? video.play() : video.pause(); break
      case 'p': case 'v': video.playbackRate -= 0.5; break
      case 'P': case 'V': video.playbackRate += 0.5; break
    }
  })
}, 5000)

jQueryなので存在しない要素にアクセスしようとするとエラーが出てしまうことから、setTimeoutで再生されてから数秒経ってからコードが動くようにしています。

キーボード操作

右手が塞がっているときは左手で、左手が塞がっているときは右手で操作できるようにしたのも、個人的には使いやすくなった気がします。

もし読者が作る場合は、もっとわかりやすいキーがあればそれに変えてみてください。

ただしPrime Video側でキャプション（Cキー）ととミュート（Mキー）は予約されているので、注意が必要です。

速度調整

video.playbackRateで操作できます。

私の環境では理論上32倍速まではできるらしいですが、実用的には7倍速が限界でした。それより大きいと動画が途中でしょっちゅう止まる。

キーボードのコマンドは基本的にYouTubeとほとんど同じにし、速度調整はPとVでできるようにしました。

再生時間調整

video.currentTimeの値を変えることでできます。

私はJLキーとADキーで操作できるようにしました。

再生停止

video.paused ? video.play() : video.pause()と3項演算子を使うと楽に実現できます。

SKキーで操作できるようにしました。

課題

Prime Videoはその安さと引き換えに、かなりの頻度でCMが流れます。

CMが流れると作動しなくなることがあるので、これは解決してゆきたいなと思っていますが、残念ながら今は見つけられていないので、そのときは検証モードを起動させて倍速を無理やり実現しています。

さいごに

ひとつなぎの大秘宝〈ワンピース〉の正体を知りたい。