YouTubeの動画を2.5倍速や4倍速で再生するブックマークレット

Video YouTube

V1

最初は拡張を使っていましたが、この程度のことに拡張を使うのには抵抗がありますし、6倍速にしたかったのに出来なかったのでやめました。

V2

とりあえず知ってる関数だけで書きました。たまに動きませんでした。

javascript:document.querySelector('video').playbackRate = 6

V3

たまに動かないのは複数のvideoタグがあるためだと考え、Array.fromで対応してみました。第二引数に関数を渡すとmap相当のことができます。

javascript:Array.from(document.querySelectorAll('video'), e => e.playbackRate = 16)

V4

しばらくV3の実装で動いていましたが、後で見るリストを使っていると動画の切り替え時に再生速度がリセットされてしまうという事象に見舞われました。videoタグの仕様を研究・観察してV4を完成させました。動画の切り替え時にloadedmetadataイベントが発火するのでその度にplaybackRateを変更するという実装にしました。addEventListenerを使用していないのは、他の再生速度への切り替えをページを更新することなく行うためです。

javascript:((v,h)=>{h({target:v});v.onloadedmetadata=h})(document.querySelector('video'),e=>e.target.playbackRate=2.5)

(
  (videoElement, handler) => {
    handler({ target: videoElement })
    videoElement.onloadedmetadata = handler
  }
)(
  document.querySelector('video'),
  e => e.target.playbackRate = 2.5
)

おまけ

後で見るリストから再生済みの動画を削除するコードです。1クリックで全消しできればいいのに、なぜか3回クリックしないと消せない仕様になっていてイライラしたので作りました。

javascript:(h=>{h('ytd-playlist-sidebar-renderer yt-icon-button',()=>{h('ytd-menu-service-item-renderer',()=>{h('tp-yt-paper-button',()=>location.reload(),1000)})})})((n,f,t=100)=>{Array.from(document.querySelectorAll(n)).pop().click();setTimeout(f,t)})

ブックマークレットで安全に変数宣言する最短の方法が即時関数なので、同じ関数を何度も使うために関数の引数に関数を渡しています。setTimeoutをPromiseで包めばネストを減らせますが、new Promiseと書く文字数がもったいなかったのでコールバック形式にしました。Array.from(...).pop()は最後の要素を取り出すためにやっています。

(
  handler => {
    handler(
      'ytd-playlist-sidebar-renderer yt-icon-button',
      () => {
        handler(
          'ytd-menu-service-item-renderer',
          () => {
            handler(
              'tp-yt-paper-button', 
              () => location.reload(),
              1000
            )
          }
        )
      }
    )
  }
)(
  (name, func, time = 100) => {
    Array.from(
      document.querySelectorAll(name)
    ).pop().click()
    setTimeout(func, time)
  }
)