<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<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 ytplayer;
var YTPlayerState;
function renderVideoTime() {
var ytTime = ytplayer.getCurrentTime()
document.getElementById('currentTime').value = ytTime
return ytTime
}
function adjustVideoTime(change) {
var ct = ytplayer.getCurrentTime()
ytplayer.seekTo( ct + change, true)
renderVideoTime()
// setTimeout( () => { renderVideoTime() }, 500) // works, most? of the tme
}
function onYouTubeIframeAPIReady(vid) {
console.log("onYouTubeIframeAPIReady")
ytplayer = new YT.Player('div_player', {
height: "390",
width: "640",
videoId: 'M7lc1UVf-VE',
playerVars: {
'autoplay': 0,
'controls': 1
},
events: {
'onReady': onYTPlayerReady,
}
});
}
function onYTPlayerReady(event) {
console.log("onYTPlayerReady")
event.target.playVideo()
renderVideoTime()
}
</script>
</head>
<body>
<div id="div_player">
</div>
<input type="text" id="currentTime">
<button type="button" onclick="adjustVideoTime(5)">+5</button>
<button type="button" onclick="adjustVideoTime(-5)">-5</button>
</body>
</html>