Part 2 How To Create Background Video For A Web Page

of 04
How To Create Background Video For A Web Page

There are a couple of easy ways to create HTML5 Video files.

If you are an inveterate web surfer you may have noticed there is an increasing use of background video in web pages. You arrive on a page and a short, looping video starts playing and you are still able to interact with the content on the page.  See it often enough and it is only natural to wonder: “How did they do that?”

Actually, it isn’t at all difficult to achieve. You need:

  • A short video of no more than 20 seconds.
  • Two copies of the video- webm, and mp4.
  • A copy of  Adobe Muse or a code editor.

In this series, I am going to show you how to create the webm and mp4 versions of the clip and then how to add it to the background of a web page using Adobe Muse and how to do it using CSS.

Let’s get started…

of 04
The HTML5 Video Formats

Which format will play depends upon the browser version on the user's PC.

There are two formats you must use for web video: mp4 and webm. You need two copies because depending on which browser and the browser version your viewer uses the browser may not be able to play an mp4 file. The fallback that has developed over the years, is webm.

If you use a video camera or your smartphone to create the clip be sure you are shooting in landscape view and that the video’s dimensions have a 16:9 aspect ratio. This shouldn’t be an issue because many cameras produce a video that is 1280 x 720 which is a 16:9 ratio. In many cases, the resulting file will be an mp4.

The mp4 format uses two codecs to compress the video and the audio tracks: H.264 for the video and AAC for the audio. Both are lossy which means information is lost during the compression. Webm uses the VP8 video compressor for video and Ogg Vorbis for the audio compressor.

The webm format is an open source codec developed by Google. It was developed because, at the time, many browsers couldn’t play an .mp4 video and the alternative – Ogg - resulted in a rather poor quality video.

Having said that the most recent version of Firefox – 37 – will now play mp4 videos but there are still a huge number of older versions of the browsers out there so, until further notice, you need both webm and mp4 versions of the file.

of 04
How To Encode Background Video Using Miro Video Converter

The free Miro Video Converter, available for Mac and PC is a one-click video solution.

If you are new to web video and looking for a cross-platform solution then Miro Video Converter is a good choice. It is a free download for both Mac and PC and is, essentially, a one-click solution to creating both file types.

To use it you simply open the application and drag the video into the interface. A thumbnail will appear and you have to choose your format. To do this, click and hold on the Format to open the pop down. Next, select your format and then click the big green Convert … button.

The file will be created. Just be aware the video won’t be found in the same location as the original. Click the Show File button and you will see it has been placed in the Miro Video Converter folder on your PC. Drag it to a folder on your desktop.

One thing you can’t do is to create multiple copies of the video.

To create the webm version, open the Format Pop Down, select WebM HD and click the big green Convert … button. The file will be saved to the same location as the previous video.

Why WebM HD? If the video was recorded using a 16:9 aspect ratio it is HD. If it wasn't, it is SD (Standard Definition) which uses a 4:3 aspect ratio.

Now that you have the two formats you need, quit the Miro Video Encoder.

of 04
How To Use CloudConvert To Create Web Video

CloudConvert is a free cloud-based media conversion service.

CloudConvert is a free web service that is the Swiss Army Knife of media converters. All you need to do is register for a free account and you are good to go.

Using the service is dead simple.

You drag the file to be converted from your desktop onto the web page. The next step is to pick your format from the pop down and then tell the service where to place the converted file. You click the big red  Start Conversion button and a progress bar appears showing you the progress of the conversion. When it is finished you simply locate the file and drag it into a folder on your desktop.

With the WebM and MP4 files created we can now turn our attention to placing them on a web page. We will start with Adobe Muse and that will be the subject of the next installment of this series.