11
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 webserve