Pause YouTube playback after X seconds
YouTube IFRAME API reference: https://developers.google.com/youtube/iframe_api_reference
Associated StackOverflow question: http://stackoverflow.com/questions/14152415/use-youtubeapi-to-play-youtube-video-until-a-particular-time-and-pause
HTML
<iframe class="ytplayer" id = "109" src="https://www.youtube.com/embed/SbQc_JLUH7k?autoplay=1" frameborder="0" allowfullscreen></iframe>
<iframe class="ytplayer" id = "104" src="https://www.youtube.com/embed/SbQc_JLUH7k?autoplay=1" frameborder="0" allowfullscreen></iframe>
JavaScript
// Load the IFrame Player API code asynchronously.
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 section = {
start: 0,
end: 5
};
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
// get .player nodes
var playerDivs = document.querySelectorAll(".ytplayer");
// nodelist to array to use forEach();
var playerDivsArr = [].slice.call(playerDivs);
var players = new Array(playerDivsArr);
console.log(playerDivs);
var player ;
function onYouTubePlayerAPIReady() {
$("iframe[id]").each(function() {
var identifier = this.id;
console.log(identifier);
player = new YT.Player(identifier, {
height: '390',
width: '640',
playerVars: {
'mute':1,
'controls':0,
'autoplay':1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
});
console.dir(player);
}
function onPlayerReady(event) {
player.seekTo(section.start, true);
player.playVideo();
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
var duration = section.end - section.start;
//alert("typeof(player.SeekTo) = " + typeof(player.seekTo));
setTimeout(restartVideoSection, duration * 1000);
}
}
function restartVideoSection() {
player.seekTo(section.start,true);
}