HTML5 Video Tag in Chrome - Why is currentTime ignored when video downloaded from my webserver?
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
- Wait for the video to download for a bit (until the progress bar is about 10% in)
- Press setTime - you should notice the time jump to 2 seconds
- press play
...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.
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
加载中,请稍侯......
精彩评论