Customizable starter design for HTML5 video
Created
10 October 2011
Requirements
User level
All
Sample files
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.
Understanding HTML5 video
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.
Watch the video: Using the custom template
See how you can embed an HTML5 video player in your web designs using the provided template. (Running time: 6:36)
Preview and download the template
Download the HTML, CSS, and source Photoshop files related to this template.
More Like This
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 2: Modifying the HTML and CSS
- What's new in Dreamweaver CS5.5
- Introduction to media queries – Part 1: What are media queries?
- Scripting the web – Part 2: Introduction to jQuery
- Styling and inserting a Spry Menu Bar 2.0 widget with the Adobe Widget Browser
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 1: Exporting the design
- HTML5 and CSS3 in Dreamweaver CS5.5 – Part 3: Using CSS media queries to target different screen resolutions
- HTML5 and CSS3 in Dreamweaver CS5.5 – Part 2: Styling the web page
- Getting started with jQuery Mobile
- Understanding Spry basics
Tutorials and samples |
| 04/23/2012 | Resolution/Compatibility/liquid layout |
|---|---|
| 04/20/2012 | using local/testing server with cs5 inserting images look fine in the split screen but do not show |
| 04/18/2012 | Ap Div help |
| 04/23/2012 | Updating |
