How to pause embedded youtube video on the last frame? - youtube

Question

When playing embedded youtube videos, I don't want to display a poor resolution thumbnail when completed. Instead I'd like to have a high-resolution image of the last frame. Is this possible?
Either I can pause on the last frame or maybe there's a way to create a high-resolution thumbnail of the last frame?

Answer 1

You can use the YouTube Player API to detect when playback has ended, and at that point do some DOM manipulation to swap out the player and swap in an img tag pointing to one of the video's thumbnails. There normally would not be a thumbnail for the last frame in the video, though, so you would have to choose a different thumbnail.
If you just want to disable the related videos that are shown when a video ends, you can use the rel=0 player parameter, but that will leave you with a black screen.

Answer 2

Video player gives a callback "onStateChange" with the status YT.PlayerState.PAUSED before calling the callback with status YT.PlayerState.ENDED, you can try here.
I am also doing the same thing. I am just displaying an overlay to cover the video with replay button, But still it appears at the end of the video and then overlay appears (some glitch is observed)

Answer 3

I ran into this same problem and after spending a bunch of time playing around with it, the best solution for me was to just pause the video a fraction of second before the end, thus keeping it on that frame. Something like this:
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('player', {
playerVars: { 'autoplay': 1, 'controls': 0,'loop': 1, 'showinfo': 0, 'disablekb': 1, 'version': 3, 'vq': 'large', 'wmode':'opaque','rel': 0 },
videoId: 'YOURVIDEOID',
events: {
'onReady': onPlayerReady,
'onStateChange': onStateChange,
'onytplayerStateChange': onStateChange }
});
}
var done = false;
function onStateChange(event){
var videoDuration = player.getDuration();
if (event.data == YT.PlayerState.PLAYING && !done) {
// pause 0.1 seconds before the end
setTimeout(pauseVideo, (videoDuration-0.1)*1000);
done = true;
}
}
function pauseVideo() {
player.pauseVideo();
}
After the video starts (which we catch using onStateChange), we can get the video duration from the YouTube Player API (using player.getDuration), and then use setInterval to time a function that pauses the video 0.1 seconds (or whichever value we choose) before the end.

Answer 4

After running into to this issue too I ended up with this, which has been working pretty consistent for me so far:
var player;
var curTimer;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId: 'The Video ID',
playerVars: { 'rel':0, 'enablejsapi':1, 'autohide':1, 'wmode':'opaque'}
});
player.addEventListener('onReady', 'onPlayerReady');
player.addEventListener('onStateChange', 'onPlayerStateChange');
}
function onPlayerStateChange(event) {
var videoDuration = event.target.getDuration();
var curTime = event.target.getCurrentTime();
if ( curTime ) {
/** Video Already Started */
/** Get video time remaining. */
videoDuration = videoDuration-curTime;
/** Remove old 'setTimeout' function */
removeTimeout(curTimer);
}
/**
Note: The '.25' is time subtracted to stop video on last frame.
Adjust this as needed.
*/
/** Add/Re-Add 'setTimeout' function with video time remaining. */
curTimer = setTimeout(pauseVideo, (videoDuration-.25)*1000);
}
function removeTimeout(elTimer){
/** Remove old timer */
clearTimeout(elTimer);
}
function stopVideo() {
player.stopVideo();
}
Explanations and/or notes are within the comments.

Answer 5

var thumb = true;
function onStateChange(event) {
if (thumb && event.data == YT.PlayerState.PLAYING) {
thumb = false;
player.pauseVideo();
return;
}
if (event.data != YT.PlayerState.ENDED) {
return;
}
player.setPlaybackQuality('highres');
player.seekTo(player.getDuration() - 1, true);
player.playVideo();
thumb = true;
}