Youtube Player API Completed state never starts
Hi so I have implemented the Youtube Player API and based on an event where I do certain things, it works fine when the video is playing or when it is paused, however, when the video is finished, the event to complete is never called, instead it raises the paused event ... I am getting url for video using get from url string, this works fine.
<script>
function get(name){
if(name=(new RegExp('[?&]'+encodeURIComponent(name)+'=([^&]*)')).exec(location.search))
return decodeURIComponent(name[1]);
}
//Load player api 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 player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: get('url'),
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(evt) {
// evt.target.playVideo();
}
function onPlayerStateChange(evt) {
if (evt.data == YT.PlayerState.PLAYING) {
$.ajax({ url:'insertToDBFromVid.php',
data: {action : 'playing' },
type: 'post',
done: function(result){
alert(result);
console.log("Success, Playing");
},
error: function(result){
alert(result)
console.log("Error in Playing");
}});
}
if (evt.data == YT.PlayerState.ENDED){
//done=true;
//console.log("Ended called!");
$.ajax({ url:'insertToDBFromVid.php',
data: {action : 'ended' },
type: 'post',
done: function(result){
alert(result);
console.log("Success, Ended");
},
error: function(result){
alert(result)
console.log("Error in Ended");
}});
}
if (evt.data == YT.PlayerState.PAUSED) {
$.ajax({ url:'insertToDBFromVid.php',
data: {action : 'paused' },
type: 'post',
done: function(result){
alert(result);
console.log("Success, Paused");
},
error: function(result){
alert(result)
console.log("Error in Paused");
}});
}
}
function stopVideo() {
player.stopVideo();
}
If someone can shine a light on why this is happening, it would be greatly helpful :)
source to share
There are many things I shout at the YouTube API, and your problem you are facing is one of them :)
In the YouTube API Docs: https://developers.google.com/youtube/iframe_api_reference#Playback_controls
Important: unlike the pauseVideo function, which leaves the player in a paused state (2), the stopVideo function can put the player in any non-playing state, including ended (0), paused (2), video signal (5), or non-stationary ( -1).
So, if you use player.stopVideo()
, the state can change to any state as quoted in the quote.
Work-round is not to use stopVideo()
, but instead to use:
player.seekTo( player.getDuration(), true );
player.playVideo(); //Can be ommitted if video is already playing
The YouTube player seems to always change state to ENDED
if the player naturally ends up. So the above solution looks for the video at the end of the video, then plays the video so that the video ends naturally.
source to share