Creating HTML5 video effects: Part 2

November 2013

Software & Technologies

Edge Code, HTML5, Canvas, JavaScript, Web Video, Video Effects


The HTML5 web standard includes a number of components that combine to create visual effects directly in a browser. In terms of video effects, I am excited that I can combine video with CSS to create layout effects, transformations, transitions, and animations. I can also render video to the HTML5 canvas to create advanced pixel-level color effects and tile effects.


Part 2 builds on concepts from my October 2013 article, which shows you how to add a range of simple layout effects to your video projects. Part 2 covers more advanced video effects, working with CSS transitions, and rendering video to the HTML5 canvas by guiding you through a range of examples.

Part 2 is divided into the following sections:

  • Using the exercise files (video)
  • The basic code setup
  • Rotating the video with a transformation
  • Fading the video with a transition
  • Animating multiple transformations simultaneously
  • Drawing the video to a canvas
  • Drawing the video to multiple tiles
  • Making the video tiles draggable on the canvas


**This article has been retired along with other Adobe Inspire Magazine content.  (December 2015)

Companion Videos

Companion videos for the article are still available at the following links:


HTML5 Video Effects – Part 2: Using the Exercise Files (4 min)