Javascript in Saint

Adobe Products Solutions Learning Help Downloads Company Store Info Sign in My cart My orders My Adobe Adobe Developer Connection / Dreamweaver Developer Center / Customizable starter design for HTML5 video by Chris Converse Chris Converse Codify Design Studio Content Overview: Using HTML5 video Watch the video: Using the custom template Preview and Download Created 10 October 2011 Page tools Share on Facebook Share on Twitter Share on LinkedIn Bookmark Print Comments (0) (0 Ratings) Dreamweaver HTML5 templates video website Requirements User level All Sample files template_12.zip 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 Watch the video: Using the custom template Preview and download the 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. Figure 1. The HTML5 Video Player widget adds and configure the necessary HTML, CSS, and JavaScript files in your web page. Figure 1. The HTML5 Video Player widget adds and configure the necessary HTML, CSS, and JavaScript files in your web page. 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. Figure 2. Dreamweaver Live Code let's you inspect the code of the HTML generated by JavaScript. Figure 2. Dreamweaver Live Code let's you inspect the code of the HTML generated by JavaScript. 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 Introduction to media queries – Part 1: What are media queries? Understanding HTML5 intelligent forms – Part 2: New form attributes Understanding HTML5 intelligent forms – Part 1: New input elements Dreamweaver templates: Customizable starter designs for beginners Customizable starter design for multiscreen development Using and customizing jQuery Mobile themes Getting started with jQuery Mobile Dreamweaver CS5 Missing Manual excerpts: Behaviors, site management, and templates Introduction to media queries – Part 2: Building a responsive design From table-based to tableless web design with CSS – Part 1: CSS Basics Tutorials and samples Tutorials Using Modernizr to detect HTML5 and CSS3 browser support Understanding HTML5 intelligent forms – Part 2 Understanding HTML5 intelligent forms – Part 1 Introduction to media queries – Part 2 Samples Customizable starter design for jQuery Mobile Customizable starter design for HTML5 video Customizable starter design for multiscreen development Dreamweaver starter designs for web designers Dreamweaver user forum More 10/12/2011 Float is not working? I need the text to the right of the image but my CSS isn't working. Help pls 09/14/2011 Mobile website question 10/08/2011 How can I consistently get newly edited pages to show up in my browser? 10/12/2011 CSS doesn't update on website after "put to site" is successful Dreamweaver Cookbook More 09/20/2011 Registration form that will generate email for registrant to validate 08/21/2011 Spry Accordion - Vertical Text - Auto Start on Page Load - Mouse Over Pause 08/17/2011 Using cfdump anywhere you like 08/11/2011 How do I create administrative user levels in Dreamweaver? Comments (0) Comments There are no reviews yet. Be the first to rate and comment on this article. Please sign in to improve or rate the content. Choose your region Security Contact Adobe Report piracy EULAs Permissions and trademarks Careers Ad Choices Copyright © 2011 Adobe Systems Incorporated. All rights reserved. Reviewed by TRUSTe: site privacy statement Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).