HTML5 Video Tag in Chrome – Why is currentTime ignored when video downloaded from the webserver

google-chromehtmlhtml5-videovideo

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.

Best Answer

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

Related Solutions

Html – Detect when an HTML5 video finishes

You can add an event listener with 'ended' as first param

Like this :

<video src="video.ogv" id="myVideo">
  video not supported
</video>

<script type='text/javascript'>
    document.getElementById('myVideo').addEventListener('ended',myHandler,false);
    function myHandler(e) {
        // What you want to do after the event
    }
</script>

Javascript – Prevent HTML5 video from being downloaded (right-click saved)

You can't. That's because that's what browsers were designed to do: Serve content. But you can make it harder to download.

First thing's first, you could disable the contextmenu event, aka "the right click". That would prevent your regular skiddie from blatantly ripping your video by right clicking and Save As. But then they could just disable JS and get around this or find the video source via the browser's debugger. Plus this is bad UX. There are lots of legitimate things in a context menu than just Save As.

You could also use custom video player libraries. Most of them implement video players that customize the context menu to your liking. So you don't get the default browser context menu. And if ever they do serve a menu item similar to Save As, you can disable it. But again, this is a JS workaround. Weaknesses are similar to the previous option.

Another way to do it is to serve the video using HTTP Live Streaming. What it essentially does is chop up the video into chunks and serve it one after the other. This is how most streaming sites serve video. So even if you manage to Save As, you only save a chunk, not the whole video. It would take a bit more effort to gather all the chunks and stitch them using some dedicated software.

Another technique is to paint <video> on <canvas>. In this technique, with a bit of JavaScript, what you see on the page is a <canvas> element rendering frames from a hidden <video>. And because it's a <canvas>, the context menu will use an <img>'s menu, not a <video>'s. You'll get a Save Image As instead of a Save Video As.

You could also use CSRF tokens to your advantage. You'd have your sever send down a token on the page. You then use that token to fetch your video. Your server checks to see if it's a valid token before it serves the video, or get an HTTP 401. The idea is that you can only ever get a video by having a token which you can only ever get if you came from the page, not directly visiting the video url.

At the end of the day, I'd just upload my video to a third-party video site, like YouTube or Vimeo. They have good video management tools, optimizes playback to the device, and they make efforts in preventing their videos from being ripped with zero effort on your end.

Best Answer

Related Solutions

Html – Detect when an HTML5 video finishes

Javascript – Prevent HTML5 video from being downloaded (right-click saved)

Related Topic