Creating HTML5 video effects: Part 2

November 2013

Software & Technologies

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

Overview

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.

videffects-pt2-fig1

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

Links

http://www.adobe.com/inspire/2013/11/html-video-effects2.html

**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:

20959_tmb_150x84_0021

HTML5 Video Effects – Part 2: Using the Exercise Files (4 min)
http://tv.adobe.com/watch/companion-videos-for-inspire/html5-video-effects-part-2-using-the-exercise-files/