An HTML5-video experiment

This demo doesn’t work at all on either Microsoft Internet Explorer or Microsoft Edge at the minute. It probably should do and needs fixing.

You’ll probably not be surprised to learn that I enjoy exploring ways of visually displaying data. This usually means charts and maps. But I’m also interested in what we can do with image and video data, particularly on the web. In modern browsers we can, for example, interactively transform image colour values and compare histograms of red, green and blue values before and after the transformation process. Video editing is trickier, but HMTL5 offers some interesting opportunities for experimentation.

Click/tap on the image below to load a short, silent, video of some Arctic terns that I filmed last summer, at the National Trust bird sanctuary on the Farne Islands in Northumberland, using the iPhone 6’s slo-mo option. It was originally recorded at 240 frames per second but I had to re-encode it at 60 fps when editing. One second of real-time action is still 240 frames, it just takes four seconds to replay that one second (at normal rate). The encoded resolution is 1280 by 720 pixels.

Play
Loop: off
Time elapsed: Time remaining:
Rate/(encoded rate): % Rate/(real-time rate): %
Blurred terns image cover
Click to load

If you’ve loaded the video above you’ll probably have noticed the controls that pop-up. These are not the default controls, but custom ones I created using HTML, CSS and JavaScript. Along side play and loop buttons you’ll see a slider that monitors, and can be used to control, the position of the video in terms of time. Such a slider or similar is common in video controls, but the second slider is less so. This, in principle at least, controls the playback rate. Initially it starts off at 60 fps (the encoded playback rate) but on modern desktop browsers and some mobile and tablet browsers you can increase and decrease that. The result: you can decide for yourself how slow you want the slow-motion to be, even during playback (in most cases).

Sadly this is a feature that has yet to be adopted in all browsers. It doesn’t seem to work in the latest Android versions of Chrome or Opera, for example. In browsers where this functionality does work, displayed frame rates may only be an approximation at the extremities (things may also get a bit jumpy at higher frame rates). On iPhones, as soon as you start playback a pop-up window appears in which the video plays back and you can no longer see or access the custom controls. I find this massively irritating (even when I’m using my iPhone normally) and, as far as I can see, is a UX blunder by Apple. (Feel free to tell me why I’m wrong.) Strangely, you can still scrub through the video using the Position slider when not playing and the Rate slider does work. You just can’t alter settings while the video is playing. I found changing to and from the pop-up video player less irritating in landscape orientation.

You can toggle the visibility of the custom controls by tapping on the visible part of the video and, on browsers that support it, go in to fullscreen mode by click-dragging or swiping right over the visible portion. To exit fullscreen mode, click-drag or swipe left.

If you can’t be bothered to scroll back up the page to try all this out, the video below works in exactly the same way.

Play
Loop: off
Time elapsed: Time remaining:
Rate/(encoded rate): % Rate/(real-time rate): %
Blurred terns image cover
Click to load

Both video recordings did originally have sound. However, what happens to sound when you change the frame rate varies from browser to browser. In some the result can be unpleasant. Because of this I removed the audio tracks. An alternative would have been to keep the audio tracks but use JavaScript to mute them when the frame rate was changed from the encoded 60 fps.

Leave a Reply

Your email address will not be published. Required fields are marked *