The HTML5 CSS Starter Page Series - Part 9: The Video Page By: Sheri German Welcome back to the HTML5 CSS Starter Page series! Now that we have the site all set up, it is time to fill the pages with HTML5 pizzazz. The first page we're going to tackle is the video page. In keeping with our goal of making the site work in the real world, we'll adopt a video fallback strategy. Be sure to download the support files at the bottom of any page of the tutorial and define a site with the start folder as the site root folder. Video for Everyone Wouldn't it be wonderful if you could insert video and audio into a page without nee ding any proprietary plugins? And if, in the process, the user could see the video play natively right in the browser? In theory, HTML5 provides us with two elements that will, in fact, do this for us: <video> and <audio> . Point to a source file either between the opening and closing tags or within the opening tag (if you are serving only one format) and you're done. In practice, however, it's not that easy. First, Internet Explorer 6, 7, and 8 do not support the video and audio elements at all, and thus need a Flash fallback. The other problem is that even the browsers that support the video element require different video formats in order to work. As of this writing, the critical formats in use to cover all the browsers are webm, mp4, ogv, and flv: WebM : Latest versions of Firefox, Chrome and Opera - Internet Explorer 9 will support it if the codec is manually installed on the computer (perhaps this requirement won't be necessary in future updates?) MP4 : Safari, Chrome, and IE9 will play this format ogv/ogg : Firefox 3.5, Chrome 4, and Opera 10.5 support as well as Linux FLV : The Flash format that all modern browsers will support In the tutorial download folder, you will find a media folder in both the start and completed site folders that provides the example "Schumann Piano Quintet in E Flat Major" video in all four formats in case you want to play with testing the various browsers. Tip: The HTML5 video entry at Wikipedia has a useful table of browser support for various video formats (http://en.wikipedia.org/wiki/HTML5_video#Table) . Dive into HTML5 has a thorough list that explains each video format (http://diveintohtml5.org/video.html) . Video Converters As you can see, supporting so many formats is the first "fly in the ointment" in serving HTML5 video. You have to take one video and convert it to three different formats, as well as the FLV or SWF format for Flash fallback for IE 6, 7, and 8. QuickTime Pro (FLV export as well as others) and Miro Video Converter (which is free and converts to ogg, WebM, and MP4) are available for both Mac and PC. http://www.mirovideoconverter.com/ (http://www.mirovideoconverter.com/) http://www.apple.com/quicktime/download/ (http://www.apple.com/quicktime/download/) Of course, you can use Flash to create FLV files, and there is also a free online converter (http://www.filewiggler.com/) that will convert video to FLV as well as the other formats you'll need. Image 1 : You can export a movie to FLV as well as other formats with the free QuickTime software Image 2 : The free Miro Video Converter will convert your video to most of the different formats you will require for the various browsers Multiple Methods There are several methods for serving video to all browsers, regardless of their HTML5 video support: Code the video element and use Flash as the fallback (nest the Flash object inside the video element) Code Flash and use the video element as the fallback (nest the video element inside the Flash object) Use an HTML5 video player such as the Kaltura HTML5 video widget that you can access through the Widget Browser in Dreamweaver (additionally, here is a list of 20 HTML5 video players (http://www.net-kit.com/20-html5-video-players/) ) Tip: You can also install the Chrome Frame plugin (http://code.google.com/chrome/chromeframe/) into older versions of Internet Explorer to give them support for the latest HTML, JavaScript and CSS features. In this tutorial, we're going to use the second option, which is to code Flash video, and add the video element as the fallback. Given the state of today's browsers, this is emerging as a popular strategy because you only have to convert your video to two formats: Flash and MP4. This is a great resource savings that will benefit us until the <video> supporting browsers sort out the video format wars. In reality, most browsers support Flash, and in any case, until the use of Internet Explorer 6, 7, and 8 dies away, we will need to continue to use it for video delivery. Given that IE9 does not work on the XP operating system, we could be waiting an exceptionally long time to be rid of Internet Explorer 8, (not to mention 6 and 7)! Flash has been a great means of delivering video, and there is no need to dump such a practical solution. The one pitfall is mobile devices: for example, iOS devices such as the iPad and the iPhone do not support Flash. As an owner of both, I get tired of being shut out of video because of a lack of Flash support. The good news is that there is often excellent HTML5 support on mobile devices, and this includes support for the HTML5 video element. The best news of all is that Dreamweaver provides a drop dead simple way of implementing this method. We can use the Insert>Media>FLV command along with HTML5 code hints to quickly add video that will play just about everywhere. Let's get started! Tip: You can watch a four part series about HTML5 video on Adobe TV: Part One: Understanding HTML5 video Part Two (http://tv.adobe.com/watch/adc-presents/videoandhtml5part2gettingstarted/) : Understanding the various video formats Part Three (http://tv.adobe.com/watch/adc-presents/video-and-html5-part-3-maximizing-html5-video-access-with-flash/) : Using Flash as a fallback Part Four (http://tv.adobe.com/watch/adc-presents/video-and-html5-part-4-flash-with-html5-fallback-choosing-a-path/) : Using the video element as the fallback Adding the Flash Video 1. Open video.html . 2. Place your cursor in the empty paragraph space right after the heading "Featured Video". 3. Select Insert>Media>FLV . The Insert FLV dialog box displays. Image 3 : Fill out the Insert FLV dialog box 4. Click the Browse button next to the URL field. 5. Locate the Media folder in the site folder. and select schumann.flv . 6. Select a skin from the Skin dropdown menu. (I chose the simple and elegant clear skin.) 7. Add in the width of 345 and the height of 240 . 8. Click OK . 9. Save the document and click OK when the dependent files dialog box displays. Image 4 : Make sure that you copy the dependent files to the server when you upload the video 10. Preview the video in the browser. Image 5 : The Flash video with the clear skin player Adding the HTML5 Video 1. Click the Code View button in the Document Window. 2. Scroll down and locate the div that includes the message to users who do not have Flash, or have an old version of Flash. <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div> 3. Delete the code between the opening and closing div tags. 4. Place your cursor between the two div tags. 5. Begin to type "vi" and Code Hints will bring up the video tag. Press enter to place it on the page. 6. Press the space bar, and the next code hint displays. Begin to type src and press return when it appears in the Code Hints. 7. Click the Browse button and navigate for the schumann.mg4 file in the Media folder. Image 6 : Code Hints provides the browse function 8. Continue to use Code Hints or just type in the following attributes: 9. Width: 345 10. Height: 240 11. Controls (This will place playback controls on the video so that the user has control over starting and stopping it) 12. Poster (browse for the schumann.jpg file in the Media folder) - this will provide a still image that displays till the video starts 13. Finally, close the video tag with all its attributes. 14. Begin typing the closing video tag and allow Dreamweaver to auto complete it. 15. If you are worried about accessibility for those who may not have Flash, an older version of Flash, or a browser that can not render a MP4 on the fly, you can add a link to download the video for offline viewing in the preferred program. The completed code should look like this: <div> <video src="media/schumann.mp4" width="345" height="240" controls poster="media/schumann.jpg"></video> <p>Can't see the video? Download <a href="media/schumann.mp4">Schumann Quintet here.</a></p> </div> 16. Preview the video on an iPad or iPhone.