WebGL Video Transitions

This is an example of using Seriously.js to generate real-time transition effects between two different video clips.

View demo

Transitions

Whip Pan

Seen in old kung fu movies and in the work of Paul Thomas Anderson and Edgar Wright. It's usually done in camera, but this is a fake version. Both video clips are moved quickly from right to left while applying a large directional blur.

Effects used:

• 2d Transform
• Directional Blur
• Blend

TV Channel Change

Uses the analog TV Glitch effect with all the settings starting off near the maximum and dropping to zero linearly over 300 milliseconds. Unlike the other transitions, this is an abrupt cut with no cross-fade.

Effects used:

• TV Glitch

Flash or Exposure Bloom

For the first half of the transition, both blur and exposure are increased to the maximum. Then we quickly cross-fade to the second video and blur and exposure are gradually brought back down to zero.

Effects used:

• Exposure
• Gaussian Blur
• Blend

Technology and Browser Support

This demo requires certain web technologies that may not be available on all browsers

• HTML Video - Processing a video image with a canvas requires loading the video directly in a <video> element, not as an iframe or via Flash. This is available in all modern browsers browsers.
• WebGL - A Javascript API for directly accessing graphics hardware. Available on both mobile and desktop platforms in Firefox (4+), Chrome (9+), Internet Explorer (11+) and Opera (12+). WebGL is not available in iOS and is available but disabled in desktop Safari, but it is available in both as of version 8, which is in beta release now.
• WebGL video textures - This is a feature of WebGL that is technically available in all browsers that support it, but both Internet Explorer and Chrome for Android have bugs that broke the feature and will prevent this demo from running. It is unknown when these bugs will be fixed.
• Mobile video - Mobile Safari does not allow multiple videos to play. It is unknown whether this will be changed when WebGL becomes available in version 8.

License

• Original code is made avalable under MIT License, Copyright (c) 2014 American Documentary Inc.
• Seriously.js is distributed here under license from from its author

Authors

• Code, concept and design by Brian Chirls, POV Digital Technology Fellow
• Trailer from Koch by Neil Barsky
• Trailer from Dance for Me by Katrine Philp
• Trailer from My Way to Olympia by Niko von Glasow