View the demo » (Firefox or Chrome required)
View the source code »
For some time, thanks to HTML5 video, it’s been possible for web developers to splice online video in real time. But with the Javascript’s graphics API WebGL, it’s possible to create more elaborate transition effects that go beyond the simple cut, mimicking what might have required Final Cut or After Effects — and a lengthy render and export.
Using my own Seriously.js, which takes advantage of the graphics hardware to render high-definition video effects, I’ve created a series of transitions that media creators can use to edit in real time in a browser.
The Whip Pan Transition Effect
The first transition I tried is a “whip pan“, where the camera pans laterally — too fast to see the cut to the next shot. We can see this in some old Kung Fu movies and in the work of Paul Thomas Anderson and Edgar Wright, (See Shaun of the Dead). Ideally, this would be done with an actual in-camera pan, but we can fake it by quickly moving the outgoing and incoming clip to the side while applying a large directional blur.
The TV Channel Change Transition Effect
The next effect is a TV channel change. It’s maybe a bit too stylized, but it’s fun and might make sense with period footage. Seriously.js happens to come with an analog TV glitch effect, with all kinds of scan-line distortion, vertical sync and other ways of screwing up the image. We start off by cranking these effects up high and then gradually but quickly bringing them back down to zero after the cut. This could be combined with other effects like black-and-white to make the whole video look more like old TV.
The Flash Transition Effect
Finally, there is the flash transition, sometimes called a glow transition or exposure bloom. The exposure is ramped way up and the whole image is increasingly blurred, leaving an almost all-white frame. After the cut, we re-focus and bring the exposure and blur back down to reveal the second shot. It’s a more nuanced effect than fading through white, as some of the original color and shape of the video is retained several frames into the transition.
Technical Notes
Implementing the image effects for this experiment was quick, as I’ve already put a lot of work into Seriously.js to include a few dozen effects and support for images and HTML5’s canvas feature — meaning it would be just as easy to transition between static images, interactive graphics or a webcam stream. I’ll hope to share these transitions as a library, but more work was required, such as managing keyboard and mouse interactions, placing and sizing video, selecting the correct video sizes and data rates for different platforms and managing multiple codecs.
In this example, the videos remain paused when we cut away from them. There are cases where it would be useful to cut back to a video later in its timeline, as though it were running somewhere in the background. That raises potential bandwidth challenges that haven’t been dealt with yet.
While traditional video software may take time to render video effects like these, we’re able to play back at high resolution and high frame rates thanks to WebGL, a fast Javascript canvas API. WebGL was originally designed for 3D graphics, doing most of its work in the GPU, a set of parallel processors built into your display hardware. WebGL is just now becoming widely available. After a few years of support in Firefox and Chrome, it has recently been added to Internet Explorer 11 and will be coming to iOS 8 in the fall. But it’s still temperamental, with bugs in Chrome for Android and Internet Explorer preventing this example from running there.
The code is available on GitHub, as is Seriously.js, and both are free to use. Let us know what you think, if you have any ideas for how this might be improved or if you end up using this in your own project. Comment below, use the hashtag #povtech or email us at filmmakers@pov.org.
Get more documentary film news and features: Subscribe to POV’s documentary blog, like POV on Facebook or follow us on Twitter @povdocs!