youtubeの組み込み表示で倍速再生する方法

概要

youtubeを見ているといつの間にか時間が経過していることが多々あると思います。
その状況を緩和するために倍速再生する方法を調べました。

またさらに二つの動画を並べる方法を調べました。

これにより従来の4倍の速度で動画を視聴することができるようになります（理解できるとは言っていない）。

やりたいこと

私の場合、youtube動画はたいていタブレットかスマホで見ています。
動画を等倍速で見ていると30時間の動画を視聴するためには30時間の時間が必要となります。
そこでタブレットなどでも簡単に倍速再生したいと考えました。
（ライブ動画は倍速再生できないけど、ライブについては時間がかかるのはしょうがないので短縮はあきらめて視聴しています）

行ったこと

youtube動画の表示

公式サイトを参考に下記のようなコードを組むと動画が再生できる。
下記の"<%= params[:movie_id] %>"の場所にyoutubeのurlからgetパラメータの"v"の値を与えてやればよい。

<div id="player"></div>

<script>
  var tag = document.createElement("script");
  tag.src = "https://www.youtube.com/iframe_api";

  var firstScriptTag = document.getElementsByTagName("script")[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady(){
    player = new YT.Player("player", {
      height: "560",
      widht: "315",
      videoId: '<%= params[:movie_id] %>',
      events: {
        "onReady": onPlayerReady,
        "onStateChange": onPlayerStateChange,
      }
    });
  }

  function onPlayerReady(event){
    var speeds = player.getAvailablePlaybackRates();

    event.target.playVideo();
  }
  function onPlayerStateChange(event){
  }
</script>

倍速再生

ほぼほぼ上記の例と同じコードでonPlayerReadyでsetPlaybackRateを追加することで倍速再生が可能となる。
（倍速再生できないプレイヤーだと等倍速で再生されたので、倍速が適用できない環境では要求は無視されるようです。）
（ちなみに下記コードだとAvailableを取得する意味はないです。）

<div id="player"></div>

<script>
  function onPlayerReady(event){
    var speeds = player.getAvailablePlaybackRates();

    event.target.setPlaybackRate(2.0);
    event.target.playVideo();
  }
</script>

画面を並べる

（無理やりですが、）二つsectionを並べて、かつコードを多重化することで、
動画を二つ並べることができました。

<div id="player1"></div>
<div id="player2"></div>

<script>
  var tag1 = document.createElement("script");
  tag1.src = "https://www.youtube.com/iframe_api";

  var tag2 = document.createElement("script");
  tag2.src = "https://www.youtube.com/iframe_api";

  var firstScriptTag1 = document.getElementsByTagName("script")[0];
  firstScriptTag1.parentNode.insertBefore(tag1, firstScriptTag1);

  var firstScriptTag2 = document.getElementsByTagName("script")[1];
  firstScriptTag2.parentNode.insertBefore(tag2, firstScriptTag2);

  var player1;
  var player2;
  function onYouTubeIframeAPIReady(){
    player1 = new YT.Player("player1", {
      height: "560",
      widht: "315",
      videoId: '<%= params[:movie_id] %>',
      events: {
        "onReady": onPlayerReady1,
        "onStateChange": onPlayerStateChange,
      }
    });

    player2 = new YT.Player("player2", {
      height: "560",
      widht: "315",
      videoId: '<%= params[:movie_id2] %>',
      events: {
        "onReady": onPlayerReady2,
        "onStateChange": onPlayerStateChange,
      }
    });
  }

  function onPlayerReady1(event){
    var speeds = player1.getAvailablePlaybackRates();

    event.target.setPlaybackRate(2.0);
    event.target.playVideo();
  }
  function onPlayerReady2(event){
    var speeds = player2.getAvailablePlaybackRates();

    event.target.setPlaybackRate(2.0);
    event.target.playVideo();
  }
  function onPlayerStateChange(event){
  }
</script>