1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Posted at

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)
  }
)
1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?