如何在最後一幀中暫停嵌入的YouTube視頻？

Question

播放嵌入的YouTube視頻時，我不想在完成時顯示效果不佳的縮略圖。相反，我想擁有最後一幀的高分辨率圖像。這可能嗎？

要麼我能在最後一幀暫停或也許有一種方式來創建的最後一幀的高分辨率縮略圖？

Answer 1

您可以使用YouTube播放器API來檢測播放何時結束，並在此時執行一些DOM操作來換出播放器，並在標記指向視頻的縮略圖之一時切換爲img。但是，視頻中最後一幀通常不會有縮略圖，因此您必須選擇不同的縮略圖。

如果您只是想禁用視頻結束時顯示的相關視頻，則可以使用rel=0播放器參數，但這樣會導致黑屏。

Answer 2

視頻播放提供了一個回調「onStateChange」與狀態調用帶有狀態回調YT.PlayerState.ENDED前YT.PlayerState.PAUSED，你可以嘗試在這裏。

我也在做同樣的事情。我只是顯示一個覆蓋覆蓋視頻與重播按鈕，但它仍然出現在視頻的結尾，然後出現覆蓋（觀察到一些小故障）

Answer 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秒（或我們選擇的任何值）。

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

說明和/或筆記的註釋中。