HTML5 Video Tag in Chrome - Why is currentTime ignored when video downloaded from my webserver?

The HTML5 video tag's currentTime property may not work properly in Chrome when your web server doesn't support HTTP range requests (byte-range serving). Chrome requires this feature for video seeking functionality.

The Problem

When you set currentTime on a video element, Chrome needs to jump to that specific time position in the video file. Without range request support, the browser cannot efficiently seek to arbitrary positions, causing currentTime to be ignored.

Testing Your Web Server

Check if your server supports byte-range requests using curl:

curl --dump-header - -r0-0 http://yourserver.com/video.mp4

Look for this header in the response:

Accept-Ranges: bytes

Example: Setting currentTime

Here's how currentTime should work when range requests are properly supported:

<video id="myVideo" controls>
    <source src="/path/to/video.mp4" type="video/mp4">
</video>

<script>
const video = document.getElementById('myVideo');

video.addEventListener('loadedmetadata', function() {
    // Jump to 30 seconds
    video.currentTime = 30;
    console.log('Set currentTime to:', video.currentTime);
});
</script>

Server Configuration Solutions

Apache: Enable mod_headers and add to .htaccess:

Header set Accept-Ranges bytes

Nginx: Add to server block:

location ~* \.(mp4|webm|ogg)$ {
    add_header Accept-Ranges bytes;
}

Node.js Express: Use express-partial-content middleware or implement range handling manually.

Verification

After configuring your server, test again with curl and verify the video seeking works in Chrome:

<script>
const video = document.getElementById('myVideo');

video.addEventListener('canplay', function() {
    // Test seeking
    video.currentTime = 60;
    
    video.addEventListener('seeked', function() {
        console.log('Successfully seeked to:', video.currentTime);
    });
});
</script>

Conclusion

Chrome requires HTTP range request support for video seeking. Configure your web server to send the Accept-Ranges: bytes header to enable currentTime functionality in HTML5 video playback.

Updated on: 2026-03-15T23:18:59+05:30

637 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements