Skip to content

Instantly share code, notes, and snippets.

@shreevatsa
Created Mar 29, 2021
Embed
What would you like to do?
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: '390',
width: '640',
videoId: `${videoId}`,
host: `${window.location.protocol}` + '//www.youtube.com',
enablejsapi: 1,
playerVars: {
rel: 0,
origin: window.location,
},
showinfo: 0,
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
}
function onPlayerStateChange(event) {
}
function toSeconds(hhmmss) {
const [hh, mm, ss] = hhmmss.split(':');
return (parseFloat(hh) * 60 + parseFloat(mm)) * 60 + parseFloat(ss);
}
{
for (const span of document.getElementsByClassName('s2')) {
const begin = span.getAttribute('begin');
span.addEventListener('click', (e) => {
const when = toSeconds(begin);
player.seekTo(when, true);
});
}
}
function playOrPause() {
if (player.getPlayerState() == 1) {
player.pauseVideo();
} else {
player.playVideo();
}
}
function changePlaybackRate(offset) {
console.log(`Changing playback rate by ${offset}`);
const rates = player.getAvailablePlaybackRates();
const curRateIndex = rates.indexOf(player.getPlaybackRate());
const newRate = rates[curRateIndex + offset];
console.log(`Setting rate to ${newRate}`);
player.setPlaybackRate(newRate);
}
document.addEventListener('keydown', function(event) {
console.log(`Got keydown with key ${event.key} code ${event.keyCode}`);
switch (event.key) {
case ' ':
playOrPause();
event.preventDefault();
break;
case 'ArrowLeft':
player.seekTo(player.getCurrentTime() - 3);
break;
case 'ArrowRight':
player.seekTo(player.getCurrentTime() + 3);
break;
case '>':
changePlaybackRate(1);
break;
case '<':
changePlaybackRate(-1);
break;
default:
console.log(`Not handling key ${event.key}`);
}
});
@shreevatsa
Copy link
Author

shreevatsa commented Mar 29, 2021

The relevant part of the rest of the HTML document / DOM (corresponding to the above) looks like:

<span begin="00:00:22.480" end="00:00:31.240" class="s2">on this particular system.
    This is</span>
<span begin="00:00:29.010" end="00:00:34.629" class="s2">something I'll probably do only once in</span>
<span begin="00:00:31.240" end="00:00:36.190" class="s2">my life, because I don’t know if I’ll</span>
<span begin="00:00:34.629" end="00:00:40.210" class="s2">understand the system as well as I do</span>
<span begin="00:00:36.190" end="00:00:41.739" class="s2">now at any other time in my life.

    And I</span>
<span begin="00:00:40.210" end="00:00:43.420" class="s2">think it’s an exciting time for the</span>

and so on.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment