youtube動画の区間リピートを実装してみた #JavaScript

youtubeで区間リピートがしたかったのですが、機能になかったので自作してみました。

youtubeでIFrame Player APIというものが用意されているので使ってみることにします

まずはブラウザに動画を表示させる
サンプルがあるので持ってきます

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>youtube</title>
    <script type="text/javascript" src="js/youtube.js" ></script>
</head>
<body>
    <div id="player"></div>
</body>
</html>

js/youtube.js

let tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";

let firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

let player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: '動画IDをいれる',
    events: {
      'onReady': onPlayerReady,
    }
  });
}

function onPlayerReady(event) {
  event.target.playVideo();
}

videoId:ってところに再生したい動画のidをいれてindex.html
を開けば動画が再生されます。
以下の画像のv=以降が動画ID

再生したい動画を変える時コードを書き換えるのがめんどくさいのでURLパラメーターで動画IDを取得できるようにしときます

js/youtube.js


function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: url_param('youtube_id')', # 変更
    events: {
      'onReady': onPlayerReady,
    }
  });
}

# 追加 (URLパラメーターから値を取得)
function url_param(name) {
  let params =new URLSearchParams(window.location.search)
  return params.get(name);
}

ここから区間リピート機能を作ります。
htmlに開始〜終了時間を入れる項目を作ります

index.html

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

  # 追加
  <input type='time' step='1' id='start_time' value='00:00:00' min='00:00:00'></input>
  <span>~</span>
  <input type='time' step='1' id='end_time' value='00:00:00'></input>
  <button id='loop'>ループ開始</button>
  <button id='loop_stop'>ループ停止</button>
</body>

js/youtube.js

window.onload = function(){
  const myEl = document.getElementById('loop');
  let loop;
  myEl.addEventListener('click', function() {
    loop = setInterval('loopPoint()', 1000);
    playVideo();
  }, false);

  const stopEl = document.getElementById('loop_stop');
  stopEl.addEventListener('click', function() {
    clearInterval(loop);
  }, false);
}

function loopPoint() {
  const endTime  = document.getElementById('end_time').value;
  const time = change_seconds_to_hours(endTime);
  if (time == 0){
      return
  } else if(time <= player.getCurrentTime()) {
    playVideo();
  }
}

function playVideo() {
    const startTime  = document.getElementById('start_time').value
    const time = change_seconds_to_hours(startTime);
    player.seekTo(time);
}

function change_seconds_to_hours(time) {
    const times = time.split(':');
    let second = 0;

    if(times[2] != undefined){
      second += Math.ceil(times[2]);
    }
    second += Math.ceil(times[1] * 60);
    second += Math.ceil(time[0] * 3600);
    return second
}

これで区間リピートできました。

以下に今回のコードをあげときます。
https://github.com/kazu-hanjuku/youtube_play