Cerco in video HTML5 con Chrome

Question

Ho riscontrato problemi con i video che utilizzano Chrome.

Per qualche ragione, non importa quello che faccio, video.seekable.end(0) è sempre 0.

Quando chiamo video.currentTime = 5, seguito da console.log(video.currentTime), vedo che è sempre 0, che sembra ripristinare il video.

Ho provato entrambi i formati webm MP4 e VP9, ​​ma entrambi hanno dato gli stessi risultati.

La cosa più fastidiosa è che Firefox funziona perfettamente. C'è qualcosa di speciale su Chrome che dovrei sapere?

Ecco il mio codice (che funziona solo in Firefox):

 <div class="myvideo"> 
     <video width="500" height="300" id="video1" preload="auto"> 
      <source src="data/video1.webm" type="video/webm"/> 
      Your browser does not support videos. 
     </video> 
     </div> 

Ed ecco la javascript:

var videoDiv = $(".myvideo").children().get(0) 
videoDiv.load(); 
    videoDiv.addEventListener("loadeddata", function(){ 
    console.log("loaded"); 
    console.log(videoDiv.seekable.end(0)); //Why is this always 0 in Chrome, but not Firefox? 
    videoDiv.currentTime = 5; 
    console.log(videoDiv.currentTime); //Why is this also always 0 in Chrome, but not Firefox? 
    }); 

noti che semplicemente chiamando videoDiv.play() viene effettivamente riprodotta correttamente il video in entrambi i browser.

Inoltre, dopo che il file del film è stato caricato completamente, lo videoDiv.buffered.end(0) fornisce anche i valori corretti in entrambi i browser.

Answer 1

Mi c'è voluto un po 'per capirlo ...

Il problema si è rivelata sul lato server. Stavo usando una versione di Jetty per servire tutti i miei file video. La semplice configurazione di Jetty non supportava byte serving.

La differenza tra Firefox e Chrome è che Firefox scaricherà l'intero file video in modo da poterlo cercare, anche se il server non supporta http code 206 (partial content). Chrome, d'altra parte, rifiuta di scaricare l'intero file (a meno che non sia molto piccolo, come circa 2-3mb).

Quindi, per ottenere il parametro currentTime di video HTML5 di lavorare in Chrome, è necessario un server che supporta il codice http 206.

Per chiunque altro abbia questo problema, è possibile raddoppiare controllare la configurazione del server con l'arricciatura:

curl -H Range:bytes=16- -I http://localhost:8080/GOPR0001.mp4 

Ciò dovrebbe restituire codice 206. Se restituisce il codice codice 200, Chrome non sarà in grado di cercare il video, ma Firefox lo farà, a causa di una soluzione alternativa nel browser.

E un ultimo consiglio: È possibile utilizzare NPM http-server per ottenere un semplice http-server per una cartella locale che supporta i contenuti parziali:

npm install http-server -g 

ed eseguirlo per servire una cartella locale:

http-server -p 8000 

Answer 2

Hai 3 possibilità per il tag Video: MP4, OGG, WebM.

Non tutti i formati funzionano su tutti i browser.

Qui, penso che WebM funzioni in Firefox ma non in Chrome, quindi è necessario fornire entrambi i formati alternativi per i file MP4 e WebM, includendo un tag 2nd Source che si riferisce al file MP4.

E.g. src = "data/video1.mp4" type = "video/mp4"

La versione pertinente verrà automaticamente selezionata dal browser.

Answer 3

Ho avuto un problema simile. Stavo ascoltando un evento finale su un video e impostando la durata corrente al centro del video per eseguirne il loop continuo. Non funzionava in Safari o in Chrome.

Penso che ci possa essere un bug in Safari/Chrome in cui le proprietà della posizione della testina non sono disponibili a meno che il supporto non sia attualmente in riproduzione.

La soluzione alternativa era avviare il ciclo appena prima della fine del video e non lasciarlo terminare.

Prova a provare il tuo avviando prima la riproduzione e poi esegui il tuo fuction per vedere se funziona in Safari Chrome.

Answer 4

Se si attende canplaythrough anziché loadeddata, funziona.

Vedere this codepen example.