Creating HTML5 video effects: Part 1

October 2013

Software & Technologies

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

Overview

I enjoy working with HTML5 video because of all the benefits it provides. Most notably, HTML5 video gives me the flexibility to style my videos even further through CSS. Effects can be as simple as cropping and sizing the video, or as complex as rendering pixel-level color effects or splitting the video into tiles like a puzzle.

videffects-pt1-fig01

I cover this topic in two parts. Part 1 builds on concepts from my February 2013 article in Adobe Inspire Magazine, Working with HTML5 video in web projects, which explains how you can add a range of simple layout effects to your video projects. Part 2 dives deeper into this topic by showing you how to combine video with CSS to create layout effects, transformations, transitions, and animations, as well as render video to the HTML5 canvas to create advanced pixel-level color effects and tile effects.

Part 1 is divided into the following sections:

  • The basic code setup
  • Adding a border and background
  • Cropping the video
  • Showing and hiding the video
  • Changing the video’s size
  • Dragging and dropping the video
  • Putting it all together

Links

http://www.adobe.com/inspire/2013/10/html-video-effects1.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:

808d9bf6-7925-74e8-08c8-f28f330a310e

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