Usando eventi video html5 su iPhone, come faccio a dire "Fatto" clic su un pulsante da una semplice pausa?

Question

Ho una pagina Web per l'iPhone che utilizza i tag video HTML5. Sull'iPhone, tali video incorporati vengono riprodotti nel lettore nativo. Ho voluto verificare se il video era finita e quando l'utente aveva respinto il video con il pulsante "Done". Inizialmente, ho provato questo:

var video = $("#someVideo").get(0);   
video.addEventListener('ended', myFunction); 

Ma che ha sparato solo quando il video è stato permesso di finire. Dopo aver giocato con altri eventi (sospensione, in stallo, in attesa) ho scoperto che il pulsante "Fatto" attiva un evento di "pausa". Tuttavia, quando aggiungo questo:

video.addEventListener('pause', myFunction); 

il mio codice è chiamato sia dal pulsante "Done" e quando l'utente tocca il pulsante di pausa nei controlli di riproduzione. Il secondo caso è indesiderabile; Voglio solo il primo caso, ma gli eventi non sembrano darmi abbastanza informazioni.

Qualcuno sa di un modo per dire quando l'utente ha colpito il pulsante "Done" nel lettore iPhone (contro semplice pausa)?

Answer 1

C'è un evento chiamato "si è concluso" che probabilmente si dovrebbe usare, vedere http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#event-media-ended.

Answer 2

Basta controllare il booleano webkitDisplayingFullscreen nella vostra funzione di pausa. Premendo Fine o Pausa si attiva l'evento di pausa, ma Done fa un piccolo extra come un'uscita dalla modalità a schermo intero. Fare questo controllo ti aiuterà a distinguere le 2 pressioni dei pulsanti. Alcuni esempi di codice qui sotto.

<script> 
var html5Video = function() { 
    return { 
     init: function() { 
      var video = document.getElementsByTagName('video')[0]; 
      video.addEventListener('ended', endVideo, false); 
      video.addEventListener('pause', pauseVideo, false); 
     } 
    }; 
}(); 

function endVideo() { 
    alert("video ended"); 
} 

function pauseVideo() { 
    var video = document.getElementsByTagName('video')[0]; 
    if (!video.webkitDisplayingFullscreen) 
     endVideo(); 
} 

html5Video.init(); 

</script> 

Answer 3

Questo è quello che vi serve:

yourplayer.addEventListener('webkitendfullscreen', onPlayerExitFullscreen, false); 

E viceversa

yourplayer.addEventListener('webkitbeginfullscreen', onPlayerEnterFullscreen, false); 

Ecco un'altra risposta alla tua domanda che ho trovato: How to figure out when a HTML5 video player enters the full screen mode on iOS/iPads?