For the MP4 file, add the following value for the type attribute to the second source element. When the browser loads your HTML code, it checks for compatibility based on the type attribute and saves time and bandwidth by not downloading every file. Once you set up support for a variety of modern browsers, you can add additional code for older browsers that do not support HTML5: when your page is loaded in an older browser that does not support the video element, it will ignore it and use the alternative.
If you save the file and load the Web page in an older browser that does not support HTML5, you would see the following message. If you load the same HTML code in a modern browser, the h1 element and the download link will be ignored because the video element is supported. To provide an even better alternative for older browsers, you can use Flash as a backup to play the video on the Web page.
Using the same technique as the last step to provide alternate HTML for unsupported elements, you can use an object element that references a Flash file as the last child of the source elements. A complete description of this code is beyond the scope of this lesson; however, the following is an overview of what the code means. The path to the MP4 file is then passed using the flashvars parameter. If the Flash player is installed, the page should appear similar to the following figure.
Although the adoption of WebM video is currently small, there is no doubt it will grow in the near future. Mozilla Firefox recently added support for WebM in Firefox 4 and Microsoft has also released a component plugin that allows WebM to run in Internet Explorer 9 and presumably Apple has not announced any support for the WebM format at this time, preferring to focus on H. The addition of the WebM format can add to the confusing landscape for those not familiar with web video.
The key point is to remember that there is no single video format that will work across all browsers and devices and it will be necessary to provide fallbacks to users for quite some time. In some scenarios, such as adding custom graphics or integrating media playback with other elements of the page, you might not want to use the native browser controls for the video element. To facilitate these types of situations, the video element exposes a JavaScript-based API to control media playback and retrieve properties of the video.
In this lesson, you will learn to add a button that stretches to the natural width of the video and controls whether video is playing or paused. You will find a simple video tag that uses the Ogg file from the previous lesson as its source. Note that the element resizes to the natural width and height of the encoded video because there is no explicit width or height set on the video element.
After the break element, add an input element with the type attribute set to "button" and the value attribute set to "Play". Additionally, add an id attribute with a value of "playPause" as follows highlighted in red. Save your file and preview the Web page in Chrome; the page should appear similar to the following figure. To capture the width of the video, add an event handler to the loadedmetadata event of the video element and set the value to "setButtonWidth " as follows highlighted in red :.
Next, you need to define variables in JavaScript that reference the video element and the input element. The first line reads a reference to the first video element on the page and saves it in a variable called video. The next line finds the input element by ID and saves a reference to it in a variable called playPause. On the next line add the setButtonWidth function as follows:.
Save your file and preview the Web page in Chrome; the page should appear as follows:. To control the playback of the video with the click of the button, however, you must add event handlers for the play and pause events. You can use the same function to handle both events by first checking the paused property of the video element. You can define this code inline as follows highlighted in red. Save your file and preview the Web page in Chrome. There are many more properties and events exposed by the video element that allow you to completely recreate the native browser controls that can be found on the W3C Web site.
Check your mailbox for the verification email from Amazon Kindle. Related Booklists. Post a Review To post a review, please sign in or sign up. You can write a book review and share your experiences. Other readers will always be interested in your opinion of the books you've read.
Whether you've loved the book or not, if you give your honest and detailed thoughts then people will find new books that are right for them. Since Free ebooks since This book starts at a foundational level with an introduction to HTML5 before moving on to more advanced topics like creating HTML5 forms, using geo location, implementing drag-and-drop, utilizing the Canvas element to create 2D and 3D graphics, and more.
Includes 15 lessons in full-color covering introductory to advanced HTML5 topics plus video tutorials and sample files that allow you to test your skills and work at your own pace. Explains more advanced concepts like working with video and audio, taking advantage of offline storage, using the Canvas element, enhancing your website with JavaScript and jQuery, and incorporating best practices for web coding into your workflow.
These materials are available for download upon purchase. Every ….
0コメント