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