Come mettere in pausa il video di YouTube incorporato nell'ultimo frame?

Question

Durante la riproduzione di video di YouTube incorporati, non desidero visualizzare una miniatura con una risoluzione scadente al termine. Invece mi piacerebbe avere un'immagine ad alta risoluzione dell'ultimo frame. È possibile?

O posso mettere in pausa l'ultimo fotogramma o forse c'è un modo per creare una miniatura ad alta risoluzione dell'ultimo fotogramma?

Answer 1

È possibile utilizzare l'API di YouTube Player per rilevare quando la riproduzione è terminata e, a quel punto, manipolare DOM per scambiare il lettore e scambiare un tag img che punta a una delle miniature del video. Normalmente non ci sarebbe una miniatura per l'ultimo fotogramma del video, quindi dovresti scegliere una miniatura diversa.

Se si desidera disattivare solo i video correlati visualizzati al termine di un video, è possibile utilizzare il parametro del player rel=0, ma questo lascerà lo schermo nero.

Answer 2

Lettore video dà un callback "onStateChange" con lo status YT.PlayerState.PAUSED prima di chiamare il callback con lo status di YT.PlayerState.ENDED, si può provare qui.

Anche io sto facendo la stessa cosa. Sto solo visualizzando una sovrapposizione per coprire il video con il pulsante di ripetizione, ma appare ancora alla fine del video e poi appare (si verifica qualche problema)

Answer 3

Mi sono imbattuto in questo stesso problema e dopo aver trascorso un po 'di tempo di giocarci, la soluzione migliore per me è stata semplicemente mettere in pausa il video una frazione di secondo prima della fine, mantenendolo così su quella cornice. Qualcosa di simile a questo:

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

Dopo il video si avvia (che abbiamo di cattura utilizzando onStateChange), siamo in grado di ottenere la durata del video dalla API di YouTube Player (usando player.getDuration), e quindi utilizzare setInterval in tanto una funzione che mette in pausa il video 0,1 secondi (o qualsiasi valore scegliamo) prima della fine.

Answer 4

Dopo l'esecuzione in a questo problema anche ho finito con questo, che ha lavorato abbastanza costante per me finora:

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

Spiegazioni e/o note sono all'interno dei commenti.