Customizable starter design for HTML5 video
Created
10 October 2011
系統需求
使用者等級
全部
範例檔案
This article hows 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.
Overview: Using 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
Preview and Download
Download the HTML, CSS, and source Photoshop files related to this template.
More Like This
- What's new in Dreamweaver CS5.5
- Introduction to media queries – Part 1: What are media queries?
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 1: Exporting the design
- Turning a design into HTML and CSS using the Fireworks to Dreamweaver workflow – Part 2: Modifying the HTML and CSS
- JavaScript for web designers
- Using regular expressions – Part 1: Understanding the basic building blocks
- Dreamweaver templates: Customizable starter designs for web designers
- Small web team uses CSS to develop big-time magazine site
- Creating your first website – Part 2: Creating the page layout
- Designing with CSS – Part 1: Understanding CSS Design Concepts