First Things First

Before we can start coding our own HTML 5 video player, we must first make sure that our server is configured to deliver video files properly. To do this we have to append some code to the .htaccess file. If you don’t have one already, you can open up your everyday text editor and add the lines we are about to see and save the file as an .htaccess file. Since I use WordPress, there was already one available for me to edit. Be warned, make sure you type the lines as is with no extra spaces before or after each line as this could easily break your website.

AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm

The Basic Code

So here’s the basic syntax behind the HTML 5 video player.

<video controls preload=“none” poster=‘poster.jpg’ width=’480′ height=’320′>
<source src=‘video.mp4′ type=‘video/mp4′>
<source src=‘video.webm’ type=‘video/webm’>
<source src=‘video.ogv’ type=‘video/ogg’>
<p>Flash embed code, or other back-up content goes here.</p>
</video>

Bear in mind that this code doesn’t represent the most stripped-down example of a video embed. Rather, it’s a basic format that I personally like to adhere to when embedding video. Instead of having multiple source files you can actually do away with the source tags and just use one video source, written as an attribute within the video tag. However, if you are concerned about serving the widest possible audience, then I would recommend using the format written above.

If you do end up using multiple video sources make sure you follow the order as written above. The way it works is that browsers start at the top of the list and work down until it finds a compatible source. MP4 is listed as the first source because it’s the highest quality video we can offer. Additionally, because of a bug in iOS devices where only the first source is used, we certainly want an iOS-supported format on top of the list. The second best format is WEBM, followed by the OGG format. And if HTML 5 isn’t supported it falls back to the HTML content written after the video sources.

The controls attribute is what prompts the browser to add its own video controls. If you wanted to make your own set of controls, which is what we’ll be doing later on, then you’d leave this out. Note that this is a boolean attribute, meaning that just by its mere presence the controls setting is set to true. Also note that some HTML user agents aren’t able to interpret boolean attributes so you might be better off writing the attribute like so: controls="controls".

The poster attribute is a nice feature that shows an image on top of the video player before the video gets loaded. This is helpful when the first frame of your video doesn’t quite capture the spirit of your content.

The preload attribute comes in three flavors–none, metadata, auto. None simply means that the video doesn’t get loaded until you hit the play button. Metadata only loads the metadata of the video so that details such as width and height are available immediately. Auto pretty much plays the movie as soon as it’s able to.

The code above is quite sufficient if you’re looking to quickly put up some video on your website. The video element comes conveniently with its own set of controls that will allow you to play the video and adjust the volume. While this is nice, an issue of design cohesion comes into play because the various browsers render their video controls differently. If this is something that concerns you then you can keep reading.

Embedding Flash

In regards to embedding a Flash media player as a back-up source, I will refer you to this wonderful site here:

Open Source Media Framework

The site provides a convenient method of embedding a nice looking Flash media player into your code. All you need to do is fill out a few text fields and it will write up the embed code for you. Just copy and paste that code into the back-up content area (after the source tags but within the video tags) and you’re set! Here’s what the code looks like.

<object width=“600″ height=“409″>
<param name=“movie” value=“http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf”></param>
<param name=“flashvars” value=“src=video.mp4&poster=poster.jpg”></param>
<param name=“allowFullScreen” value=“true”></param>
<param name=“allowscriptaccess” value=“always”></param>
<embed src=“http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf” type=“application/x-shockwave-flash” allowscriptaccess=“always” allowfullscreen=“true” width=“600″ height=“409″ flashvars=“src=video.mp4&poster=poster.jpg”></embed>
</object>

If you’re planning on using this code don’t forget to url-encode both of the flashvars values. Aside from that, you really only need to adjust the dimension values and the source values. The nice part of it all is that you didn’t even have to touch any Flash to have your very own Flash media player!

Basic training, done!

That’s pretty much it as far as embedding HTML 5 video is concerned. The hard part comes when you want to build your own player skin, which is what we’ll address in the following pages.