I am using HTML 5 and I just want to create a webpage where an embedded YouTube video already starts to restart playing after it has reached a certain limit. So, here's the code:--
<!DOCTYPE html><html lang="en"><head> <title>Video Playback</title> </head><body><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 player; function onYouTubeIframeAPIReady() { player = new YT.Player('player', { width:150, height:150, autoplay: 1, loop: 1, controls: 1, vq: 'hd144', videoId: 'bcdxvxiztyh', playerVars: {'playsinline': 1 }, events: {'onReady': onPlayerReady,'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { event.target.playVideo(); player.mute(); } var done = false; function onPlayerStateChange(event) { setTimeout(stopVideo, 4000); done = true; } function stopVideo() { player.stopVideo(); }</script></body></html></body>
I tried the above code and it just plays the video for only the first 4 seconds but it doesn't restart to play the same 4 seconds again. It seems to run only once. How do I solve this?