Poszukiwania w filmach HTML5 w Chrome

Question

Mam problemy z wyszukiwaniem filmów w przeglądarce Chrome.

Z jakiegoś powodu, bez względu na to, co robię, video.seekable.end(0) jest zawsze 0.

Kiedy zadzwonić video.currentTime = 5, a następnie console.log(video.currentTime), widzę to zawsze 0, co wydaje się zresetować wideo.

Próbowałem już formatów webm opartych na MP4 i VP9, ​​ale obie dały takie same wyniki.

Co więcej denerwujące jest to, że Firefox działa doskonale. Czy jest coś wyjątkowego w Chrome, o czym powinienem wiedzieć?

Oto mój kod (który działa tylko w 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> 

A oto 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? 
    }); 

Należy pamiętać, że po prostu dzwoniąc videoDiv.play() ma rzeczywiście poprawnie odtworzyć film w obu przeglądarkach.

Po pełnym załadowaniu pliku filmu, videoDiv.buffered.end(0) podaje również poprawne wartości w obu przeglądarkach.

Answer 1

Zajęło mi trochę czasu, aby zrozumieć to ...

Problemem okazało się być po stronie serwera. Używałem wersji Jetty do obsługi wszystkich moich plików wideo. Prosta konfiguracja Jetty nie obsługiwała byte serving.

Różnica między Firefoksem a Chrome polega na tym, że Firefox pobierze cały plik wideo, aby można było go przejrzeć, nawet jeśli serwer nie obsługuje http code 206 (partial content). Z drugiej strony Chrome odmawia pobrania całego pliku (chyba że jest naprawdę mały, jak około 2-3mb).

Tak, aby uzyskać parametr HTML5 video currentTime pracować w Chrome, potrzebujesz serwera, który obsługuje kod HTTP 206.

dla nikogo ten problem, można dokładnie sprawdzić plik konfiguracyjny serwera z dyni:

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

ten powinien zwrócić kod 206. Jeśli zwróci kod , Chrome nie będzie mógł wyszukać filmu, ale Firefox będzie go używał z powodu obejścia problemu w przeglądarce.

a ostateczna wskazówka: Można użyć npm serwer HTTP, aby uzyskać prosty serwer HTTP do folderu lokalnego, który obsługuje częściowe zawartość:

npm install http-server -g 

i uruchomić go, aby służyć lokalnej folder:

http-server -p 8000 

Answer 2

Masz 3 możliwości tagu wideo: MP4, OGG, WebM.

Nie wszystkie formaty działają we wszystkich przeglądarkach.

Tutaj, myślę, że WebM działa w przeglądarce Firefox, ale nie w Chrome, więc powinieneś dostarczyć oba alternatywne formaty plików MP4 i WebM, dodając drugi tag źródłowy odnoszący się do pliku MP4.

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

Odpowiednia wersja zostanie automatycznie wybrana przez przeglądarkę.

Answer 3

Miałem podobny problem. Słuchałem zdarzenia końcowego na filmie wideo i ustawiłem currentTime na środek wideo, aby zapętlało go w sposób ciągły. To nie działało w Safari ani w Chrome.

Myślę, że może występować błąd w Safari/Chrome, w którym właściwości pozycji głowicy nie są dostępne, chyba że media są aktualnie odtwarzane.

Moje obejście polegało na uruchomieniu pętli tuż przed końcem wideo i nie pozwalaniu na jej zakończenie.

Spróbuj przetestować swój, najpierw uruchamiając odtwarzanie, a następnie uruchom funkcję, aby sprawdzić, czy działa w przeglądarce Safari Chrome.

Answer 4

Jeśli zaczekasz na canplaythrough zamiast loadeddata, to działa.

Zobacz this codepen example.