Menu
I want to be able to play back video from a specific time using the HTML5 video tag (and currently only need to worry about Chrome). This is possible by setting the currentTime property of a video element. That works fine in Chrome with a video sourced from html5rocks.com, but is ignored when the same file is loaded from my own local webserver.
Using the sample code from http://playground.html5rocks.com/#video_tag, I have arrived at the following HTML:
<!DOCTYPE html>
<html>
<body>
<video id="video1" width="320" height="240" volume=".7" controls preload=true autobuffer>
<source src="http://playground.html5rocks.com/samples/html5_misc/chrome_japan.webm" type='video/webm; codecs="vp8, vorbis"'/>
</video>
<input type=button onclick="play()" value="play">
<input type=button onclick="setTime()" value="setTime">
<input type=button onclick="pause()" value="pause">
<script>
var play=function() {
document.getElementById("video1").play();
}
var setTime=function() {
document.getElementById("video1").currentTime=2;
}
var pause=function() {
document.getElementById("video1").pause();
}
</script>
</body>
</html>
Using Chrome, if you
...the video will start at 2 seconds in.
But if I download the webm file in the source src to my local webserver, and change src to point locally:
<source src="chrome_japan.webm" type='video/webm; codecs="vp8, vorbis"'/>
...then setting currentTime is complete ignored. No errors are showing in the developer tools console.
Now, my webserver is serving this with mime type "video/webm", but it will be served like any old file -- not streamed.
Do I need a webserver that streams in some specific way? What else could be at fault here?
Note: The webserver is a proprietary platform and won't have any of the same exact settings or controls one might expect of Tomcat or some other commonly used webserver, though there may be other ways to achieve the same effect.
525
Make sure your web server is capable of serving the document using byte ranges. Google Chrome requires that this works. Without it, seeking will be disabled and setting currentTime will have no effect.
To test if your web server does this, use the following command:
curl --dump-header - -r0-0 http://theurl
The response status must read 206 Partial Content and you should receive only the first byte of the resource instead of the whole resource.
-Phil
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
