Seeking in HTML5 video with Chrome

Question

I'm having issues seeking in video's using Chrome.

For some reason, no matter what I do, video.seekable.end(0) is always 0.

When I call video.currentTime = 5, followed by console.log(video.currentTime), I see it is always 0, which seems to reset the video.

I've tried both MP4 and VP9-based webm formats, but both gave the same results.

What's more annoying is that Firefox runs everything perfectly. Is there something special about Chrome that I should know about?

Here's my code (which only works 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> 

And here's the 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?   }); 

Note that simply calling videoDiv.play() does actually correctly play the video in both browsers.

Also, after the movie file is fully loaded, the videoDiv.buffered.end(0) also gives correct values in both browsers.

Answer 1

It took me a while to figure it out...

The problem turned out to be server-side. I was using a version of Jetty to serve all my video-files. The simple configuration of Jetty did not support byte serving.

The difference between Firefox and Chrome is that Firefox will download the entire video file so that you can seek through it, even if the server does not support http code 206 (partial content). Chrome on the other hand refuses to download the entire file (unless it is really small, like around 2-3mb).

So to get the currentTime parameter of html5 video to be working in Chrome, you need a server that supports http code 206.

For anyone else having this problem, you can double check your server config with curl:

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

This should return code 206. If it returns code 200, Chrome will not be able to seek the video, but Firefox will, due to a workaround in the browser.

And a final tip: You can use npm http-server to get a simple http-server for a local folder that supports partial content:

npm install http-server -g 

And run it to serve a local folder:

http-server -p 8000 

Answer 2

If you wait for canplaythrough instead of loadeddata, it works.

See this codepen example.