My iframe is set up to play videos within a specific time range but I'm encountering an issue. When the end time is reached (case 0), I want to reload a slightly different URL (with autoplay=0).
The problem arises when OnStateChange doesn't recognize any changes after the first refresh of the iframe. Consequently, it fails to reload after the second viewing and instead starts playing the video from the beginning on the third view. How can I ensure that the video reloaded every time it reaches the end time?
I've also checked out this query on Stack Overflow, though I couldn't find a solution there – although it might hold the key?
(It may seem like an unconventional approach, but this is what works best for my current situation.)
On another note, I'm struggling to change the id="player" to ytplayer instead. Is it not meant to be modified?
<html>
<head>
<script type="text/javascript" src="http://www.youtube.com/player_api"> </script>
<script>
var player;
// This function creates an <iframe> (and YouTube player)
// after the API code downloads.
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
events: {
'onStateChange': function (event) {
switch (event.data) {
case -1:
console.log ('unstarted');
break;
case 0:
console.log ('ended');
var iframe = document.getElementById('player');
//autoplay=0
iframe.src = "http://www.youtube.com/embed/TINASKjjNfw?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=0"
console.log ('player reloaded');
break;
case 1:
console.log ('playing');
break;
case 2:
console.log ('paused');
break;
case 3:
console.log ('buffering');
break;
case 5:
console.log ('video cued');
break;
}
}
}
});
}
</script>
</head>
<body>
<iframe class="video-frame" id="player" width="560" height="315"
src="http://www.youtube.com/embed/TINASKjjNfw?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=1"
frameborder="0"></iframe>
</body>
</html>
Update: I attempted the following code snippet as suggested in this post, but unfortunately, it didn't yield the desired results.
<script>
function floaded1() {
player1 = new YT.Player('player1', {
events: {
'onStateChange': function (event) {
if (event.data == 0) {
var iframe = document.getElementById('player1');
iframe.src = "http://www.youtube.com/embed/TINASKjjNfw?&enablejsapi=1&controls=1&showinfo=1&start=20&end=25&rel=0&autoplay=0" //autoplay=0
};
}
}
});
} </script>
</head>
<body>
<iframe onload="floaded1()" id="player1" width="240" height="220"
src="http://www.youtube.com/embed/0Bmhjf0rKe8
?enablejsapi=1&rel=0&showinfo=2&iv_load_policy=3&modestbranding=1&start=10&end=15&rel=0&autoplay=1"
frameborder="0" allowfullscreen> </iframe>