Playing Video (Part 2)

Complexities of Video Video is a complicated topic and even some seasoned web designers do not fully understand many of the details. Contributing to the confusion is that there are always multiple formats that go into a single video file, including: File Format (also known as Container Format) – This is indicated by the file extension. Examples include .mp4, .avi, .flv, .ogv, .webm, and .mov. Video Compression Format (also known as Video Codec) – This is the method by which the visual portion of the video is encoded digitally. Examples include MPEG-4, H.264, Sorenson, Theora, and VP8. Audio Codec – The method used to digitally encode the audio portion of the video. Examples include MP3, PCM, AAC, and Vorbis. Luckily, there is no need for us to experiment with and learn all of these platforms. Instead, we will focus on just those necessary to deliver videos to our web audience.

Common Video Formats These are the video format combinations most commonly used to provide video in HTML5 web pages: Video Codec: H.264 Theora VP8 Container Format: .mp4 .ogv .webm The closest thing we have to an "industry standard". YouTube uses this format, as do many electronic devices, such as Blu-ray players. Patented and might require licensing fees. An open format that requires no licensing fees. Created by the same group that made the Ogg Vorbis audio format. Often referred to as "Ogg" format. Sponsored by Google, this newest format is thought to be the preferred standard in the future. Many sites are switching to this platform, though the patent status is still unclear.

Browser Support for Video Types Just as with audio, each major browser has its own level of support for the different video formats: Video File Format Support .mp4 .ogv .webm IE 9.0+ No Firefox 21.0+* 3.5+ 4.0+ Chrome 4.0+** 6.0+ Safari 3.2+ Opera 10.5+ 10.6+ *Firefox supports MP4 only for some operating systems. **Chrome announced plans to remove MP4 support in future versions. No single video format is supported by all major browsers. If we use just one format on our site, a significant portion of our audience will not be able to play the video.

Example Browser Support Problem Our previous video example worked fine in IE and Chrome (which support the MP4 format) but now let's see how the same page looks in Firefox: <video src="video/rmnp.mp4" width="480" height="321" controls></video> Hardly what we want our web visitors to see. We'll use the same strategy to deal with the video issue as we did with audio: a fallback system to accommodate multiple formats. Firefox 19.0

Setting Up the Fallback System Let's offer video to the browser in multiple formats. If a user's browser doesn't support the first format offered, it will continue through the list until it discovers a format it can play: <video width="480" height="321" controls> <source src="video/rmnp.mp4"> <source src="video/rmnp.ogv"> <source src="video/rmnp.webm"> </video> We removed the src attribute from the <video> element and used the new HTML5 <source> element. Firefox skips over the MP4 file and loads the OGV format instead. Note that we could have omitted the WEBM file format and still had nearly 100% coverage for browsers currently in use. Since WEBM is gaining momentum very quickly on the web, we are including it to prepare for the future. Firefox 19.0

Adding MIME Type Definitions Again, it's good practice to define the MIME type for all video files: Video Format MP4 OGV WEBM MIME-type type="video/mp4" type="video/ogg" type="video/webm" <video width="480" height="321" controls> <source src="video/rmnp.mp4" type="video/mp4"> <source src="video/rmnp.ogv" type="video/ogg"> <source src="video/rmnp.webm" type="video/webm"> </video> Once more, don't get these confused. The "video/rmnp.webm" in the src attribute refers to an actual file on the web server, while the "video/webm" in the type attribute is the string of text that tells the browser which file format to expect but doesn't refer to an actual location.

Creating the Fallback Video Files Assuming our original video file is in H.264/MP4 format, we'll need to create Ogg and WebM formats for each of our videos. Special software is available to convert a large batch of video files, but for our purposes, we can use one of the online tools to convert individual files. Let's use the same site as we did with the audio conversion: Notice that the site can convert video files to and from a large number of formats. Let's use the .mp4 video on our local drive to create a version in the .ogv and .webm formats.

Final Fallback We still need to address those users with older browsers that don't support the <video> element. Using the same method as we did with <audio>, we can "trick" these older browsers into playing our videos, either by using Flash or embedding a YouTube window: <video width="480" height="321" controls> <source src="video/rmnp.mp4" type="video/mp4"> <source src="video/rmnp.ogv" type="video/ogg"> <source src="video/rmnp.webm" type="video/webm"> <embed width="480" height="321" src="http://www.youtube.com/v/njjAYlxGzzQ" type="application/x-shockwave-flash"></embed> </video> Visitors still using IE 8.0 will be able to play the video in a YouTube window. To offer this final fallback, we'll need to upload our video to YouTube and get the individual embed code. IE 8.0