Riproduci / metti in pausa il video HTML 5 usando JQuery

206

Sto cercando di controllare i video HTML5 usando JQuery. Ho due clip in un'interfaccia a schede, ci sono sei schede in totale, le altre hanno solo immagini. Sto cercando di riprodurre i video clip quando si fa clic sulla loro scheda e poi si interrompe quando si fa clic su uno degli altri.

Questa deve essere una cosa semplice da fare ma non riesco a farlo funzionare, il codice che sto usando per riprodurre il video è:

$('#playMovie1').click(function(){
  $('#movie1').play();
      });

Ho letto che l'elemento video deve essere esposto in una funzione per poterlo controllare ma non riesce a trovare un esempio. Sono in grado di farlo funzionare usando JS:

document.getElementById('movie1').play();

Qualsiasi consiglio sarebbe grande. Grazie

— Barny83
fonte

357

La tua soluzione mostra il problema qui: playnon è una funzione jQuery ma una funzione dell'elemento DOM. Pertanto è necessario chiamarlo sull'elemento DOM. Fornisci un esempio di come eseguire questa operazione con le funzioni DOM native. L'equivalente di jQuery - se si desidera farlo per adattarsi a una selezione jQuery esistente - sarebbe $('#videoId').get(0).play(). ( getottiene l'elemento DOM nativo dalla selezione jQuery.)

— lonesomeday
fonte

Fantastico, funziona perfettamente, grazie davvero. Buono anche a capire meglio il DOM.

— Barny83,

L'uso di JQuery per controllare i video in questo modo sembra causare problemi con la riproduzione su iPhone. Ho l'elemento video in una scheda, jquery lo rivela, ma quindi facendo clic sulla freccia di avvio del video non si avvia la clip. Quando rimuovo la riga $ ('# videoId'). Get (0) .play () non ci sono problemi. Qual è il modo migliore per aggirare questo? Stavo pensando di poter rimuovere js con una dichiarazione condizionale per iOS - il video non si avvierà comunque automaticamente per i dispositivi iOS, quindi sarei felice di farlo - o c'è una soluzione più semplice? Qualsiasi aiuto molto apprezzato.

— Barny83

Come posso mettere in pausa tutti gli elementi <video> su una pagina?

— prismspecs,

@russellsayshi - no, riprodurrà solo UN video; prismspecs ha chiesto TUTTI i video. Sintassi corretta: $('video').each(this.play());riprodurre tutto; $('video').each(this.pause());per mettere in pausa tutto. each()è una funzione jQuery, ciò che viene passato in essa è una funzione javascript, che viene applicata a ciascun elemento. Man mano che ciascun elemento viene gestito, thisrappresenta quell'elemento.

— ToolmakerSteve

Se vuoi solo il primo elemento, puoi semplificare sostituendolo .get(0)con [0]. Quindi $('video')[0].play();o per un ID specifico $('#videoId')[0].play();.

— ToolmakerSteve