Creating HTML5 video effects: Part 2

Dan Carr

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

You can explore the supplied files (see Figure 1) or follow along with your own video.

Figure 1. Click an effect to see the result of applying different CSS properties to HTML5 video.

Before you get started

If this is your first time working with HTML5 video, you can read more about it in my article, Working with HTML5 video in web projects. The article covers the basics of working with the video and source tags, video formats, and support across browsers. You might also want to check out another article of mine, Working with the HTML5 canvas in web projects, for more information on the canvas. To make the most of this article, you should be somewhat familiar with both topics.

You can open the supplied files in Dreamweaver CC to follow along and use the code snippets in your own work. While working in Dreamweaver, be sure to look at Code view to see the code examples (see Figure 2) and Live view to see the live preview.

Figure 2. The video examples viewed in Dreamweaver CC

Using the exercise files

Video 1 walks you through the process of setting up your files and adding effects.

Note: The example_basiccode.html file has been provided as the starting point for each of the examples if you would like to try the code samples described in this tutorial.

Video 1. Setting up the video file and adding effects.

Effects support across devices

Effects applied to HTML5 video are best supported on desktop browsers. That said, there are still differences in how the effects render across browsers. Be sure to check the Can I Use website to determine whether a specific property or element is supported on the browsers you are targeting. As you work with special effects and video, you have to consider both performance and support across devices.

If you're working in the mobile environment, there are a few things to note. The Google Android platform supports most HTML5 features related to CSS, the canvas, and video effects, but performance has limitations. Apple Safari is more conservative. Neither the iPad nor iPhone support the canvas' drawImage API, which is a key feature in creating advanced video effects on the canvas. The iPad supports playing video inline with the ability to create custom controls and canvas overlays. The iPhone does not support canvas overlays or custom video controls (the iPhone plays video in full screen mode with native controls).

Example 1: The basic code setup

This section covers code basics if you’re interested. Otherwise, you can skip ahead. Part 1 of this article set up a simple HTML template for working with video and the examples presented here. If you haven't read Part 1, you might want to check it out for an overview of working with the HTML template, CSS, JavaScript, and simple layout effects.

Open the example1_basiccode.html file in Dreamweaver CC or a browser to see the code in action.

The basic HTML template shown in Listing 1 is the starting point for each of the examples.

Example 2: Rotate the video with a transformation

You can apply CSS transformations to your video to rotate, skew, scale, or translate (move) it on the page. Most commonly I find myself using the scale and translate transformations, but it's interesting to note that you can apply CSS transformations or visual properties to video. This example shows you how to rotate the video (see Figure 3).

Figure 3. The video rotated 45 degrees using a CSS transformation

Add the CSS class shown in Listing 2 to the <style> tag to rotate the video 45 degrees in the example2_transform.html file.

First, I defined the rotate CSS class. From there, I added JavaScript to toggle between adding and removing the effect by adding and removing the rotate class on the video. The CSS class contains five versions of the same property. The transform property sets the effect to rotate. It requires the use of the four additional vendor-specific prefixes for use across browsers.

Check out the example2_transform_complete.html file to see the working example. You can click a button to see the rotation effect added and removed. In this example, the video is cropped by a surrounding div tag (see Part 1 of this series to learn how to crop video).

Example 3: Fade the video with a transition

You can use fades as transitions for the video or for emphasis on rollovers or clicks (see Figure 4). To do so, you use the CSS transition and opacity properties. The transition property activates animation between state changes in CSS properties. You can use it to animate during fades, transformations, or other CSS property changes.

Figure 4. The video during a fade-out transition

Add the CSS classes in Listing 4 to the <style> tag to create the fade transition effect in the example3_fade.html file.

This example follows the same format as the rotation example, with the addition of the transition class. I created two classes so that the transition property can be added to the video element separately from the rotate transformation. This enables me to more easily add and remove the effect. In this case, the transition class is assigned to the video tag's class attribute. The fade class is added and removed dynamically using JavaScript. You can use this pattern to animate any visual CSS property on the video element.

Check out the example3_fade_complete.html file for a working example. You can click the button to fade in and fade out the video.

Example 4: Dynamically animate multiple transformations

In some projects I find that it's useful to dynamically control how CSS transformations are applied to a video. Instead of using prebuilt CSS classes, I use JavaScript to dynamically write the CSS. As a result, I can control any of the transformation properties based on user input or other factors (see Figure 5).

This snippet builds on the previous concepts with the exception that the CSS transformations are changed dynamically using a JavaScript function. This approach could be used to respond to the user manipulating slider controls or some other input type.

Note that CSS also supports multi-framed animations. You can use CSS animation to create more complex transitions like bounce and flip. I used a few of the animation classes from Dan Eden's animate.css project on the general examples page in Figure 1 of this article.

Check out the example4_transitions_complete.html file to see a working example. You can click a button to add and remove random animated transformations.

Example 5: Draw video to the canvas

You can render video to the canvas to create frame-by-frame image effects as the video plays. The process involves creating a video element, hiding it, and then sampling its frames to the canvas using the drawImage API. This example shows the video rendered to the canvas at half size (see Figure 6).

Figure 6. The video drawn to the canvas at half size

Add the following CSS rule to the <style> tag in the example5_canvas.html file:

This code assumes there is a video element with an id name of video-source, and a canvas element with an id name of video-canvas. The CSS rule hides the video from the screen. The JavaScript code creates a reference to the canvas' drawing context, and calls the draw() function when the video starts playing. The draw() function is called repeatedly, copying frames from the video element to the canvas element until the video ends or gets paused.

Note that sizing the video is for demonstration purposes only. Rendering video to the canvas is an expensive process and should only be used when you're creating effects that require the canvas. Video can be sized easily enough in CSS (see Part 1 of this series to learn how to change the video size).

Check out the example5_canvas_complete.html file for a working example.

Example 6: Draw video to multiple tiles

One benefit of rendering video frames to the canvas is that you can control the image data frame by frame. For example, you could produce a color effect like grayscale or sepia tone, or you could render sections of the video to tiles on the canvas (see Figure 7).

Figure 7. The video rendered with a tiled effect on the canvas

At this point, a detailed discussion of the code involved goes beyond the scope of this article, but the general concepts are interesting to discuss. For full control over the video rendering, you would use two canvases. One canvas would be invisible, used for copying frame data from the video, and one would be visible, used for displaying parts of the copied data. The step in which you render from the invisible canvas to the visible canvas is where you can perform effects. In this example, each tile is copied from the first canvas and rendered in an offset position in the second canvas, creating the tile effect.

Take a look at the code in the example file to deconstruct the effect. You can also read Rendering video to tiles on the canvas on my blog for more in-depth technical details of the process.

Check out the example6_tiles_complete.html file for a working example.

Example 7: Make video tiles draggable on the canvas

The next step in working with the canvas tile effect is to make the tiles draggable (see Figure 8).

Figure 8. The video tiles dragged from their original position

The interesting thing about this effect is that it's all an illusion. The canvas is a flat drawing space to which you render graphics. This example creates the illusion of draggable tiles by allowing you to drag the tile's drawing coordinate space. In other words, there are no separate tiles on the canvas, only the saved coordinate space that you sample the tiles into from the hidden canvas. By keeping track of where you drag each tile's coordinate space, you can create the illusion of movement.

Check out the example6_dragtiles_complete.html file for a working example. It builds on the previous sample by enabling you to drag the tiles around and scatter them like puzzle pieces.

Where to go from here

In most scenarios using HTML5 video is as simple as writing a few tags in an HTML page and being impressed at how easy it is to post content. As options for video playback with special effects become more feasible, I encourage to play with the features available to you in CSS and JavaScript. Keep in mind considerations about performance and use across devices.

Dan Carr is lead developer of Dan Carr Design in San Francisco. With 15 years' experience collaborating with Adobe and Macromedia, Dan has produced training materials, technical articles, and features available in Flash, Flex, and more. Dan's most recent work specializes in gaming and video for Flash, HTML5, and iOS.