You’ve probably heard about HTML5 and the ability to embed video. Well this sounds all well and good but its been a bit of a mission getting my head around it and finally getting to a point where it actually works. I first started looking into it about 2 months ago when creating videos for the new Tribe website. Me and Ben (the web developer there) spent quite a bit of time scratching our heads and testing different methods until we came up with a solution that should work across all platforms.

In this tutorial I’ll try my best to explain the process of getting HTML5 video to embed into a WordPress Blog, you’re not limited to a WP blog, you should be able to adapt it for any type of site. Bear in mind I don’t have a great deal of knowledge in the web area, so I apologise now if this is a little sloppy.

Remember only HTML5 supported browsers can view the video, this currently includes the latest versions of Chrome, IE9, Firefox4, Safari, Opera and most mobile devices such as the iPhone, iPad etc.

Okay there’s a few things you’ll need to get for this to work:

Access to your own hosting, via FTP. I will be using Filezilla

A video you want to host. (Here’s a link to the original source file used in the above clip)

A file converter. I will be using xmedia Recode because its free and is the best WebM converter I’ve come across.

A text editor

Flowplayer Step 1 – Converting The Video

To get the video to play across multiple platforms you need to convert your original file in to two formats, the new and open source WebM which is supported by Chrome, Firefox4 and Opera also a H.264 MP4 file that’s supported by safari, IE9, mobile devices and will be used by Flowplayer if the browser does not support HTML5 (IE8 and below for example)

Download and install xmedia-recode. (Unfortunately this is only available for windows, I haven’t looked into mac alternatives)

Open it up and you should see this screen:

Drag your original file to where the highlighted area is in the above screen shot or click ‘Open File’.

Select the imported video file by clicking it.

Where it says format select ‘WebM’

At the bottom choose your destination for the converted video. I’ve chosen the desktop.

Now click the ‘Filters/Preview’ tab and change the resolution.

All the content on my blog is 555 pixels wide, for some reason you cannot enter this figure into the program, so I leave it at the nearest available option: ‘552×312’

Now click the ‘Add Job’ button at the top of the window. If you go to the ‘Jobs’ tab you can see that its been added to the list. The great thing about this program is its ability to batch process easily, So if you have a few files that need converting you can just keep importing them and adding them to the list.

So now that you have the WebM ready to encode go back to the ‘Format’ tab.

This time choose ‘MP4’ from the ‘Format’ roll down.

Choose ‘MPEG-4 AVC /H.264’ from the ‘Codec’ roll down.

Now select the ‘Video’ tab and make sure the settings are the same as mine below: Its important that these are correct, I have found if they are left as default then the video wont play on iPhones. Again make sure that you change the video resolu

tion in the ‘Filters/Preview’ tab.. if you need to that is. Also worth noting that you should make sure the ‘Keep aspect ratio’ check box is selected when changing the size.

Now click the ‘Add Job’ button again.

If you click the ‘Jobs’ tab you’ll see two files listed and ready to encode.. only one thing left to do…..

Click ‘Encode’ at the top. A pop up will appear with the encoding progress. Step 2 – Setting up your site I came across a problem when testing the video out in different browsers. Firefox4 could not display it for some reason. After some time and frustration I finally worked out it must be something to do with the settings on my server and not a codec issue. Ben showed me that the ‘.htaccess’ folder hosted on my server needed updating so the WebM format could be recognised by some browsers. I have to be honest I’m not entirely sure why or how but this solution works..

So login to your site via your FTP and locate your ‘.htaccess’ file and open it with a text editor.

Add the following lines to the top of the document: AddType video/ogg .ogv

AddType video/mp4 .mp4

AddType video/webm .webm Note that the .ogv file is probably unnecessary now that firefox4 supports WebM.

Save the file and upload it back to your server. Now your site is ready to play the video content. Step 3 – Uploading the video Now that the site is ready you need to upload your video.

Load up your FTP client and create a new directory, name it video. For organisational sake you could create sub directories for every set of videos you upload.

Copy the files you converted in xmedia to the newly created folder. Step 4 – Embedding the video. So now you’re finally ready to embed the video! If you want purely HTML5 video playing on your site then the code below will do just that. If you want to support more browsers by including a fall-back flash player, read the rest of section then follow the instructions in step 5. <video id="movie" width="552" height="312" preload controls autoplay="autoplay"> <source src="http://www.digitalanthill.com/video/randomblog/powder.mp4 " type=’video/mp4; codecs="avc1.42E01E, mp4a.40.2"’ /> <source src="http://www.digitalanthill.com/video/randomblog/powder.webm " type=’video/webm; codecs="vp8, vorbis"’ />

</video> Key:

preload = remove this if you don’t want the video to play as you load the page

controls = remove this if you want to build you own controller

autoplay=”autoplay” = remove this if you don’t want the video to autoplay

Bold URLs = you need to replace these with links to the video you just uploaded The above code is the most efficient way (I’ve found) of getting a video to embed into your site. As long as you replace the bold areas with you own requirements it should work. You can (and probably should) take it one step further by adding flash support in there too. This will allow browsers that don’t support HTML5 to resort back to a native flash player. The following instructions will show you how to do just that. Step 5 – Enable Flash Download Flowplayer (free) and copy the ‘flowplayer’ folder to the ‘public_html’ folder on your server.