Why does setting currentTime of HTML5 video element reset time in Chrome?

Question

I want to set the time position of a video in HTML5. The time should be set like this:

function settime(){
    var video = document.getElementById("video1");
    console.log(video.currentTime); //----->output for example 15.3
    video.currentTime = 10.0;
    console.log(video.currentTime);//----->>output always 0
}

And the video is embedded like this:

<button onclick="settime();">Set Time</button>
<div class="container">
<video id="video1" class="video-js vjs-default-skin" muted>
     <source src="video.m4v" type="video/mp4" />
     HTML5 Video is required for this example.
</video>

But for some reason, this always just resets currentTime to 0 in Chrome.

Why gets the time reset when setting currentTime? And how can I set currentTime correctly?

Answer 1

This is caused in many cases by the server not replying with an Accept-Ranges header. For an obscure, only-Google-developer-relevant reason (the FF folks don't seem to be so offended by a server replying without an Accept-Ranges header), they refuse to implement seeking when such a header is not provided. You can add one very easily (at least for testing) by using an nginx proxy and adding proxy_force_ranges on; (server or location both work).

Answer 2

I finally figured out an answer! Chrome requires you to set the currentTime as a String, and not as a number.

function settime() {
    var video = document.getElementById("video1");
    console.log(video.currentTime); // output 0
    video.currentTime = 10.0;
    console.log(video.currentTime); // output 0 for some chrome users or 10 for firefox and others
    video.currentTime = "10.0";
    console.log(video.currentTime); // output 10
}

settime();

<audio id="video1" src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3" controls></audio>
<div>Click play to start the audio at 10 s.</div>

Answer 3

This is a bug in Chrome, which apparently only happens with 'some' videos. Similar bug reports have been filed and closed numerous times in the past, so I suggest we keep a watch on it, so it doesn't get closed again until the issue is actually fixed.

Answer 4

It has probably already been addressed, but it's a Chrome "bug" that they could fix like FF but #wontfix I guess. It's a server-side fix so you would want to look at making sure you pass the headers right.

It's wasteful as heck but by setting the Accept-Ranges to bytes (be sure to include the content length and mime type as well), it will try to redownload the file every time you zoom around from byte zero all the way to where you're landing -- so it lets you jump around but at a huge cost.

    header('Accept-Ranges: bytes');

I would advise you read through this question's answers and try to do ranges all the way right so that you're not wasting as much bandwidth:

Resumable downloads when using PHP to send the file?

Also, more reference:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#range_requests

Answer 5

You can add preload="auto" and the browser will try to download the file as soon as possible.

https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics

Worked for me.

Answer 6

Seems you're using video.js. If so, get and set currentTime via VideoJsPlayer.currentTime() method.

For example:

const player = videojs(document.getElementById("video1"));

// read currentTime
console.log(player.currentTime());

//set currentTime
player.currentTime(10.0);

// read currentTime
console.log(player.currentTime());

Answer 7

In my case I had to update video serving server to return response with Status Code 206 and Content-Range and Content-Length headers

Answer 8

I came across the same problem. Here's what happened in the bottom line.

1. If you are writing code in an integrated development environment, then open your HTML file directly from a hard disk besides the IDE server - This happened to me, the server did not let you set an arbitrary time during video playback.
2. You can check if the browser can perform this operation alert ("Start:" + player.seekable.start (0) + "End:" + player.seekable.end (0)); player.seekable returns a TimeRanges object: Definition and Usage The seekable property returns a TimeRanges object. The TimeRanges object represents ranges of the audio / video that are available for seeking for user. A seekable range is a time-range of audio / video where the user can seek (move playback position) to. For non-streaming videos it is often possible to seek anywhere in the video even before it has been buffered. Note: This property is read-only. www.w3schools.com article

Answer 9

The solution for me was to first send the following headers from my server:

Accept-Ranges: none,
Content-Length: 123456,
Content-Type: audio/mpeg

And then use a MediaSource object:

const mediaSource = new MediaSource();
audio.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });

function sourceOpen() {
    URL.revokeObjectURL(audio.src);
    const sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');

    fetch('https://example.com/audio.mp3')
    .then(response => response.arrayBuffer())
    .then(data => {
        sourceBuffer.appendBuffer(data);
    })
    .catch(error => {
        console.log(error);
    });
}

This will force the browser to download the whole file, which may not be desirable depending on your use case.

Answer 10

It should be

var video = document.getElementById("video1");

as you have

<video id="video1" class="video-js vjs-default-skin" muted>