All 1 entries tagged H264

View all 4 entries tagged H264 on Warwick Blogs | View entries tagged H264 at Technorati | There are no images tagged H264 on this blog

Thu 16 Oct 11:50

How to: Display web–friendly video on your web pages

More and more websites are choosing to display a rich experience to users by embedding video on their page. The problem with this is that embedding videos in web pages is very easy to get wrong. Ideally, you want something that users can watch at a reasonable resolution (and in full screen if they desire), has a reasonable quality, but does not take forever to download. Ideally, it should be possible to stream the video to the user, so they can start watching it even before it finishes downloading.

The problem with this is that the videos that users want to put up are generally in a bad format for the web - they are either too large to download, or in a format such as WMV, AVI or MOV that forces users to use in-built players in their operating system. This causes numerous problems were videos display fine for one user but not for another, particularly when moving between Microsoft Windows and Mac OS X.

Luckily, there is a format of video called FLV that uses Adobe Flash in the browser. Adobe's independently verified statistics say that a video-capable Flash player (Flash 7 and above) is installed on around 98% of machines. This is also what Youtube uses to display video, so it is pretty safe to make the expectation that if a user wants to view video on the web, they should be able to view video on Youtube. This means we can give a unified experience for all.

But how do you use this in Sitebuilder?

1. Upload the video to your Sitebuilder page

Take your video file and upload it to Sitebuilder. You don't need to make it into an FLV or MP4 or reduce the quality for web viewing yet, but if it's a large file you might want to wait to upload it until you're on campus, or it might take a very long time.

First, click "Upload" from the edit dropdown

2. Go to the edit section and convert your file

If you go to the edit section, you can select your file in the "Files" tab and then click on "Convert".

Here, we really want to do three conversions.

A high quality H.264 conversion for those who support it (around 80% of users)
A lower quality FLV conversion for those without H.264 support
A preview image for our video

The reasoning behind doing three conversions is fairly simple. H.264 is a high quality web format that is growing more and more (for example, it is used by BBC iPlayer for their "High Quality" shows), but it is only supported by around 80% of web users at the moment. It's important not to freeze out the other 18% who can view Youtube videos (which are of a much lower quality), so we should create a fallback video as well - when we embed it, Sitebuilder will let us automatically revert to the lower quality video if the user doesn't support it. We should also generate a preview image so viewers have an idea of how the video will look before they click the play button.

Most of the default settings are probably fine for our video, but we should make sure that the size is suitable for what we're embedding. We don't want to shrink the video artificially in the browser, because that's a waste of quality and size, so we'll make sure that the video is at most, 640 pixels wide. Our original video in this example was 1280x720, so we should set the height to 360px to maintain the same aspect ratio - we're halving the physical size of the video. It's also important to make sure that the "Allow streaming" checkbox is checked; this will allow users to start watching the video before it has finished downloading.

Once we've submitted all three conversion requests, we need to wait for Sitebuilder to convert them. This may take some time, since video conversion is a very intensive and difficult task, but Sitebuilder will send you an email when the conversions are complete.

3. Rename the converted files and add keywords and a description to them

When Sitebuilder downloads the converted files, it puts a timestamp at the start of them - this isn't really helpful for the sake of embedding them in web-pages, so we'll rename them and remove it first. We should now have four files in the directory: solar.mov (the original), solar.mp4 (H.264 version), solar.flv (FLV version) and solar.jpg (preview image).

It's important to add metadata to your files, so click the "Edit properties" button on the file toolbar for them and add some keywords and a description and so forth.

4. Embed the video in your web page

You can embed video in your web page using the "Insert media" button in the JScript editor. This should show a window where you can enter information about your video. Enter the MP4 URL in the top box, and set your video type to "MP4 video" (this should enable the "Fallback" input box at the bottom). Set your preview image to the JPG URL, and the fallback video to the FLV url. The options should look something like this: