如何在最后一帧暂停嵌入的 youtube 视频？答案

【问题标题】：How to pause embedded youtube video on the last frame?如何在最后一帧暂停嵌入的 youtube 视频？
【发布时间】：2012-12-18 04:34:55
【问题描述】：

播放嵌入的 youtube 视频时，我不想在完成后显示分辨率不佳的缩略图。相反，我想要最后一帧的高分辨率图像。这可能吗？

我可以在最后一帧暂停，还是有办法创建最后一帧的高分辨率缩略图？

【问题讨论】：

标签： youtube youtube-api youtube-javascript-api

【解决方案1】：

您可以使用 YouTube Player API 来检测播放何时结束，然后执行一些 DOM 操作以换出播放器并换入指向视频缩略图之一的 img 标记。不过，视频中的最后一帧通常没有缩略图，因此您必须选择不同的缩略图。

如果您只想禁用在视频结束时显示的相关视频，您可以使用rel=0 播放器参数，但这会导致您出现黑屏。

【讨论】：

我喜欢这个解决方案 - 如果有人在低分辨率观看，最后一帧可能看起来很脏暂停。交换 img 标记将使您能够选择高质量的缩略图。

【解决方案2】：

视频播放器在调用状态为YT.PlayerState.ENDED的回调之前，会给出一个状态为YT.PlayerState.PAUSED的回调“onStateChange”，您可以在这里尝试。

我也在做同样的事情。我只是显示一个覆盖层来覆盖带有重播按钮的视频，但它仍然出现在视频的末尾，然后出现覆盖层（观察到一些故障）

【讨论】：

【解决方案3】：

我遇到了同样的问题，在花了很多时间玩它之后，对我来说最好的解决方案是在结束前暂停视频几分之一秒，从而将其保持在该帧上。像这样的：

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();
    }

视频开始后（我们使用 onStateChange 捕获），我们可以从 YouTube 播放器 API 获取视频时长（使用 player.getDuration），然后使用 setInterval 对将视频暂停 0.1 秒（或任何其他时间）的函数进行计时我们选择的值）在结束之前。

【讨论】：

这会很棘手，但这不考虑视频是否停止，即在播放期间加载。

【解决方案4】：

在遇到这个问题后，我也解决了这个问题，到目前为止，这对我来说一直很有效：

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();
}

解释和/或注释在 cmets 内。

【讨论】：

【解决方案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; 

}

【讨论】：