HTML5 Video pause and rewind

Question

C'è un modo per mettere in pausa e riavvolgere su 0 un video HTML5? O semplicemente basta?

Ho un popup jQuery, quindi quando qualcuno fa clic su di esso, il popup appare e il video viene riprodotto, e quando si preme il pulsante di chiusura il video si interrompe. Quindi quello che sto cercando di fare è che se fai nuovamente clic sul pulsante per mostrare il popup, il video inizia nella posizione iniziale (0 secondi).

Grazie.

Answer 1

È possibile ottenere un riferimento al proprio elemento jquery video all'apertura (o alla chiusura del popup) e metterlo in pausa usando pause(), quindi impostare la proprietà "currentTime" su 0 per tornare all'inizio.

Ecco un riferimento allo documentation per il tempo corrente.

ecco un esempio di codice:

var mediaElement = document.getElementById("video"); 
mediaElement.pause(); 
mediaElement.currentTime = 0; 

Answer 2

Basta chiamare il metodo pause() dell'elemento video. Per ripristinare l'ora, impostare currentTime su 0 (o qualsiasi altro valore se necessario, in secondi).

Answer 3

Per avere una corretta stop (pausa & riavvolgimento) funzionalità che puoi effettuare le seguenti operazioni:

var video = document.getElementById('vidId'); 
// or video = $('.video-selector')[0]; 
video.pause(); 
video.currentTime = 0; 
video.load(); 

Nota: Questa è l'unica versione che ha funzionato per me in cromo usando nodejs (meteorjs) nel backend, che serve webm & ogg file

Answer 4

Per ripristinare un video a 0 secondi in jQuery:

$('#video')[0].currentTime = 0; 

Oppure, a JS vaniglia (anche se questo è stato sottolineato in precedenza):

var video = document.getElementById('video'); 
video.currentTime = 0;