Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
