If you are new to online video processing, you may be overwelmed with the available information. You or your client just want video on a website. The simpliest option is the use YouTube or some other free video host. Most companies won’t like the idea though. They don’t want to obviously advertise a separate product or business through their website. Entirely reasonable.

The remaining options are to self host or use an external pay-for service. Brightcove is a well known option for external service, but there are many others. Depending on the number of videos and site users, it might even be a cheaper and faster method. You’ll need to evaulate the costs.

In my case, for a site with <10 videos that won’t be costantly played, a self hosted progressive download “streaming” video is the best option. Note the quotes around streaming. Real streaming video requires separate server (often Java based) software and is the only method allow instant seeking. “instant seek” is an acceptable loss for my use.

Format

Current progressive download video best practices dictate: the video must work on every device, and where possible not require Adobe Flash. The FLV format is out, and sadly, since Apple devices don’t support it, WebM is also out. The video format winner is H.264.

Audio format should be stereo and you can use your choice of MP3 or AAC. MP3 is better supported, but AAC has a lower file size. It is safe to assume, if the client browser can play H.264, then it can play AAC.

The two data streams(video/audio) will be stored together in a MP4 container.

Summary: MP4 with H.264 video and AAC audio.

Conversion/Transcoding

Converting video from one format to another is called transcoding. You’ll need to transcode the video you’ve got from it’s original format (MOV, MPV, AVI, WMV, FLV) into the new MP4 format. There are lots of options for video transcoders. My current preferred software is the Windows-only VidCoder. VidCoder is based on HandBrake which is available for all operating systems. The following step-by-step is for VidCoder V0.8.2.0, but use will be similar for HandBrake.

  1. Download and install VidCoder.
  2. Start the program.
  3. On the main windows, in the Source drop down box click Video File.
  4. Select the file you want to transcode.
  5. Best-guess options will be automatically selected, but you’ll need to change a few.
  6. Click the button labeled Settings, a new window probably titled Preset: Normal will appear.
  7. Confirm the following settings:
    1. Container: MP4
    2. Extension: .mp4
    3. Checkboxes: Check Web Optimized, others are your choice.
  8. Select the Video tab
  9. By default, Constant Quality is selected at 20. You’ll probably want to adjust this to 25 or 30 to reduce the file size.
  10. Select the Audio tab
  11. If there is more than one audio stream, remove all but one using the blue X.
  12. Adjust the audio stream settings: 1. Codec: AAC (faac) 2. Mixdown: Stereo
  13. At the top of the window are the words Save As… click them.
  14. A new window will appear titled Name Preset.
  15. In the text box title Choose a name for the preset: type: H.264 Progressive Download
  16. Click OK
  17. Click the X in the upper right of the Preset window to close it.
  18. Check the Destination: and adjust it if needed.
  19. Click Encode
  20. Wait.
  21. Done!

There are many more options to the program, but this should cover the minimum you need to get HTML5 web ready video prepared.

Implementation/Use

MediaElement.js is a HTML5 with Flash fallback video player which works on every major browser and most mobile devices. I am using it in Drupal 7 with the MediaElement module. I add a file field to a content type and then use the MediaElement Video display format (admin/structure/types/manage/[content_type]/display/default) to display the file.

There are many HTML5 video players, such as videojs, and html5video. Check a google search near you for more information.

QA

  1. My video doesn’t start until it fully downloads! Why?
    • The MOOV Atom is at the end of the file. I am not making up the term! Video can’t start playing until it gets the meta data, or complete information about what the file contains. Make sure to check the option labeled “Web optimized” in VidCoder or HandBrake to put the meta data at the start of the file. If you can’t or don’t want to transcode the file again, you can use the Adobe AIR application QTIndexSwapper to rearrange the file data. More information on the H.264 MOOV Atom issue.
  2. My video has jagged edges on all over! Why?
    • Your original video source is interlaced. You need to deinterlace or decomb it. In the preset window, select the Video Filters tab, and change the Decomb drop down to Default. More information about Deinterlacing on Wikipedia.