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.
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.