Customizable starter design for HTML5 video

This article shows you how to use this customizable starter design for embedding HTML5 video in your websites. Read the overview to learn about the HTML5 Video Player widget used by this template, preview and download the template and related files and assets, and watch a short video to learn how you can customize this template.

One of the most anticipated features of HTML5 is its support for video. The video tag allows you to specify various parameters about your video, and then allows each browser the freedom to handle the video in its own way. Some browsers may use the video support provided within the operating system, such is the case with many tablets, or the browser may include player controls of its own for video playback.

An alternative option is to use a player that is consistent across browsers and devices, uses graphics and CSS to alter the design, and provides additional support for video playback for older browsers in the way of a Flash-based fallback solution. Fortunately, Adobe has provided just such a player, and it is available to Dreamweaver in the way of a widget. To gain access to this widget, open the Adobe Widget Browser and search for HTML5 Video Player.

Based on the Kaltura player, the HTML5 Video Player widget adds and configures the necessary HTML, CSS, and JavaScript files in your web page, providing you with a state-of-the-art video player that will work on all standards-compliant devices, while also providing support for older, less-compliant browsers.

This template provides a CSS overrides file, as well as a source presliced Photoshop template to help you quickly customize your player designs. While this template provides overrides for some of the HTML markup used by the Kaltura player, there is certainly more customizing you can do. One obstacle, however, may be "seeing" the HTML markup generated by the JavaScript. Here's where the Dreamweaver Live Code feature saves the day.

When you run a web page that inlcudes the Kaltura player, or any page with JavaScript-generated HTML, Dreamweaver provides a way for you to see the code that is generated by JavaScript. This powerful feature, called Live Code, allows you to view the modified DOM (document object model) as it is manipulated by JavaScript. Using this information will help inform new CSS rules you can create in order to style and alter the new HTML elements.

Download the HTML, CSS, and source Photoshop files related to this template.