Setting up an HTML5 video player

So back in the day, putting video into a web page was all about using embed and object tags, to get Flash video into pages. While embedding Flash video is still an option today, native HTML5 video is growing in popularity. And it's not too hard to see why. Aside from not needing the Flash plugin to get the video into our web pages, it's straightforward to call a video file with an HTML5 element called, you guessed it, Video. And it's easy to provide a fallback, like a link to a video file itself in case a browser doesn't support native video. And native video support in browsers is fairly solid. However, different browsers support different video file formats. Between an Mpeg and Ogg Theora file tough we can cover a fairly wide number of site visitors. A little bit about each file type. MP4, it's a container format for a number of different video encoding standards called codecs. Most frequently used and proprietary H.264 codec, which is what Blu-ray discs use. Another file type is .ogv. It's a container format for the open source Theora codec. Another file type is .webm. It's a royalty-free, VP8 codec that's being developed by Google. Why don't we have one video file for all browsers to support? Well, it's not that easy. One, there's intellectual property and licensing fees involved, in order to play certain codecs, and browser vendors need to pay for certain codecs to put it into the browser. Firefox and Opera tend to support free, and open source formats. And Apple and Microsoft pay fees for H.264 Codec. Thankfully, the video element allows us to cite multiple video files through source elements that can be nested within the video element itself. So we can have greater native support for our videos. And just in case the server we're hosting our pages on isn't set up to deliver the video files correctly, we need to set a MIME type. Like we have to set a type attribute for CSS files as type equals text/css, to tell the browser we're looking to a CSS file, we need to tell the browser what kind of video file is being pulled. And if a browser needs help to determine which codec to use to play the video, we should pass along that information as well through the type attribute within the source element. Now that we've linked to our video files, it's also worth noting that the video element allows us to add some enhancements to the video player. One, we can choose to show the video controls to the user. We can set the video to play as soon as it's ready. And we can set the video to loop if need be. And all you need to do to include those enhancements, is to list them in the video element. Just like a normal attribute. Although I'd personally leave out Autoplay and Loop, as a kindness to my visitors, having a video play by itself is jarring enough, to have it loop is cruel. We can even add a poster frame for a video so as a browser downloads a video, it can display an image that represents the video itself. And we can do that through the poster attribute and link to our image asset, like you would for an image through the source attribute. While the native video poster frames are a nice touch, they only appear until the user hits Play. If the poster frame isn't cited, maybe you left it off on purpose, or the length of the poster frame isn't working correctly. The first frame of the video is used instead. One very cool thing about the poster frames is that they support multiple different image formats. It can take just about any website or image file type and use it as a poster frame. Even SVGs. Now, let's code up a video into our webpage to show how it's done. First, I'm going to use the div element with the class of video-container. Then we add the video element with the controls and poster attributes. Next we add two source elements to pull in both the .OGV and .MP4 video file formats. Now let's make a fall back for the content in the video element in case a browser doesn;t support native video. So the user will be able to download the video. Now let's pull the page and see how it looks. >> There are hot dogs and popcorn and candy galore. There's soft drinks and coffee, and a whole lot more. >> The video works. We've now included a video natively into our page. In the next video, let's look at how we can make it flexible so it works with our fluid layout