Willus.com Home   |   Archive   |   About  

Streaming Tutorial II:
HTML 5 and iPad-friendly Video from your own Web Site

Making videos compatible with multiple browsers and devices
Last updated May 29, 2013

  
  INTRODUCTION
Today virtually every major browser supports HTML 5.0 embedded video as an alternative to requiring Adobe's Flash player plug-in, as does YouTube (see YouTube's blog article about HTML5 vs. Flash). This makes it easier than ever to stream your videos to PCs, laptops, smartphones, and tablets without requiring users to install Adobe Flash Player, which, for example, iPads and iPhones do not support. In support of Flash, though, Jan Ozer thinks HTML5 video is over-hyped as a one-size-fits-all solution for web video (Oct 2011).

THE VIDEO FORMAT WAR
There are two major competing video formats supported by different companies for various reasons (see the table below). The latest versions of Mozilla Firefox, Google Chrome, Opera, and YouTube all support WebM (VP8/Vorbis). WebM is open source (it was released by Google as open source in May 2010) and supposedly unencumbered by patents. Microsoft and Apple, on the other hand, prefer the MP4 container format with H.264 encoded video, though the WebM Project has a web page devoted to getting .webm videos running in IE9. Even if IE9 directly supports WebM, though, it doesn't help, because Apple remains entrenched in the MP4/H.264 camp. The reason Google and Mozilla prefer WebM is that MP4/H.264 has legal issues involving patents and licenses. H.264, on the other hand, has very widespread hardware support in present-day computers and portable devices for video playback. [Aside: Another alternative video format is the open-source Ogg (Theora/Vorbis) format supported by some browsers, but it has been made largely obsolete by WebM's wider support.]

A WHITE FLAG?
Released on May 15, 2013, Firefox 21 now has built-in support for playing MP4/H.264 files. This means that one video format, MP4/H.264, is supported by all major browsers (except Opera).

NECESSARY PIECES
With Firefox 21 adding support for MP4/H.264, you can encode your video in only one format: MP4/H.264, and this would leave only Opera in the list of unsupported browsers. If you have the disk space and time and want to hedge your bets, you can encode in two formats: MP4/H.264 and WebM. See the supported browsers below.

Container
Format
File
Extension
Video
Encoding
Audio
Encoding
Supporting
Browsers
MP4 .mp4 H.264 AAC or MP3 Safari 3.0+ (Apple), IE 9.0+ (Microsoft), Chrome 5.0+ (Google)*, Firefox 21+, iPhone 3.0+, Android 2.0+
WebM .webm VP8 Vorbis Firefox 4.0+, Chrome 5.0+, Opera 10.6+, IE 9.0+**
* - Google had been planning to drop H.264 support as of 11 Jan 2011, but they appear to have backed away from that.
** - IE9 to support WebM only with a user-installed codec

If you want to maintain compatibility with older browsers which don't support embedded video but do support flash, you'll also need FLV hosting.com's Flash-based video player file, YTPlayer.swf (local copy--right click it and select "Save link as ..."). This small file must be in the same folder as your html file which launches it. It launches a player using Adobe's Flash Player plugin. Thank you to FLV hosting for this nice player. The YTPlayer.swf will play the .mp4 file, fortunately (no need to have a different format just for this player). You'll then need a way to convert your video files to .mp4 and .webm. See below for more on how to do that.

Finally, you may need to contact your web hoster and have them modify their server mime types according to the instructions on this page (see the Server Support section). Be sure to also add video/webm to the mime types for WebM support. I had to do this, but my web hoster responded very quickly and was happy to oblige. Note that some hoster control/config pages allow you to change your mime types yourself. You might want to check yours.

HTML EXAMPLE
After getting YTPlayer.swf, and converting your video to the .mp4 and .webm file formats (see next section) you need to create an HTML file to show the video. Here is an HTML example. The example includes .ogv video, but these days I just post .webm and .mp4 versions of my videos. The HTML source is below:

  <!doctype html>
  <html>
  <style type="text/css"><!-- img { display:block } video {display:block} --></style>
  <body bgcolor=#c0ffc0><center>
  <font face="calibri,arial,sans-serif">
  <h1>Cat Food Burglar</h1>
  <font color=#008000 size=+2><b>VIDEO</b></font><br>
  <table width=0 cellpadding=0 cellspacing=0 border=4 bordercolor=#008000><tr><td>
  <!-- Actual video file is 480x360 -->
  <video width="480" height="360" controls autoplay>
      <!-- .mp4 file must come first for Safari.  IE9 will also play it. -->
      <source src="cat_food_burglar.mp4" />
      <!-- Firefox 4.x, Google Chrome, and Opera will play the .webm format -->
      <source src="cat_food_burglar.webm" />
      <!-- Firefox 3.5/3.6 will only play .ogv files -->
      <source src="cat_food_burglar.ogv" />
      <!-- If all else fails, the script below will try to launch the Flash player. -->
      <embed
          src="YTPlayer.swf"
          flashvars="movieName=cat_food_burglar.mp4&autoStart=true"
          width=480
          height=390
          allowFullScreen=true
          type="application/x-shockwave-flash"
          pluginspage="http://get.adobe.com/flashplayer" />
      </video>
  </td></tr></table>
  <br>
  <font size=+1>Hidden camera catches my dog swiping cat food.</font>
  <br><br>
  <table border=0><tr>
  <td valign=top align=left>Downloads:</td>
  <td valign=center align=center><a href="cat_food_burglar.mp4">.mp4</a><br>
  <font size=-1>7.4 MiB<br>805 kibps</font></td>
  <td valign=center align=center><a href="cat_food_burglar.webm">.webm</a><br>
  <font size=-1>6.7 MiB<br>732 kibps</font></td>
  <td valign=center align=center><a href="cat_food_burglar.ogv">.ogv</a><br>
  <font size=-1>6.7 MiB<br>729 kibps</font></td>
  </tr></table>
  <font size=-1 color=black>If the video doesn't play, upgrade to the latest
  <a href="http://firefox.com">Firefox browser</a><br>
  or download and install 
  <a href="http://get.adobe.com/flashplayer/">Adobe FlashPlayer</a>.</font>
  </font>
  </center></body></html>

Note that without the first line of the HTML source above (<!doctype html>), IE9 will not interpret the <video> tag correctly. The only files in the folder on the server are: index.html (listed above), YTPlayer.swf, and the video files, cat_food_burglar.mp4, cat_food_burglar.ogv, and cat_food_burglar.webm. Again, you can disregard the .ogv file these days. I leave it here just for completeness.

Here is another example which shows you which file your web browser is using.

These examples will test what video formats your browser can play: .mp4  |  .webm  |  .ogv.

CREATING THE .mp4 (and .webm and .ogv) FILES WITH FFMPEG
FFmpeg is an extremely versatile command-line utility which will convert/scale/crop between many different video and audio formats. See the FFmpeg section of my utility software page for more details. I recommend this page (64-bit or 32-bit static build) for a good Windows version of ffmpeg.exe that encodes to all the types listed below. See my ffmpeg/avconv benchmark page for more on why. If you google around, you should be able to find a user-friendly, GUI front-end for FFmpeg, but I just use it from the command line. This is the command I use to convert my hi-def Panasonic camera videos to .mp4 files:
  ffmpeg -threads 4 -i input_video.mts -i_qfactor 0.71 -qcomp 0.6
         -qmin 10 -qmax 63 -qdiff 4 -trellis 0 -vcodec libx264 
         -s 640x360 -b:v 1000k -b:a 56k -ar 22050 output_video.mp4
...and this command to convert to .webm files (libvpx vcodec):
  ffmpeg -threads 4 -i input_video.mts -s 640x360 -qmax 63 -b:v 1000k
         -b:a 56k -ar 22050 -acodec vorbis output_video.webm
...and finally this command to convert to .ogv files (libtheora vcodec):
  ffmpeg -i input_video.mts -s 640x360 -qmax 63 -b:v 1000k
         -b:a 56k -ar 22050 -acodec vorbis output_video.ogv
The above commands convert input_video.mts (can be .mov, .avi, or other type) to output_video.mp4 using h.264 encoding (-vcodec libx264) and a target bit rate of 1000 kibps; or to output_video.webm or to output_video.ogv using the same parameters. The output video size is 640 x 360. You'll want to make sure the output video size matches the aspect ratio of your videos (mine are hi-def, so they are 16:9, but most standard def videos are 4:3, so you'd use -s 480x360). The -b:a 56k and -ar 22050 set the audio so it will be compatible with the video players.

Other FFmpeg (and avconv) notes:
  • The -b:v and -b:a options are options for the bitrate used by later versions of ffmpeg.exe (or avconv.exe) (October 2011 or after). Download a more recent version if your version doesn't understand these options.
  • All of the extra parameters in the mp4 conversion command are there to get the h.264 encoding to go smoothly. I've made them part of a Windows batch (script) file so I don't forget them.
  • The -qmax 63 option above allows the use of maximum compression (63 is the highest value allowed) on the video frames in order to achieve the desired video bit rate (-b:v 1000k). Setting this value lower will improve the video quality, but the requested bit rate (-b:v option) rate may not be achieved.
  • The -threads option enables multiple threads to do the encoding, which will make FFmpeg encode faster on a multi-core/multi-threaded CPU. Not all encoders take advantage of this option (e.g. encoding to .ogv). See my ffmpeg/avconv benchmark page for how well different encoders perform using multiple threads.
  • FFmpeg has much more capability--it can crop your video, scale it, take a specific time slice, etc. For more about how to use FFmpeg, see the FFmpeg documentation page. For example, adding the arguments -ss 7 -t 35 to the conversion commands above would start 7 seconds into the source video and convert the next 35 seconds to the output video.

OTHER WAYS TO CONVERT YOUR VIDEO FILES
1. Check out the encoding instructions in Mark Pilgrim's tutorial. The table of contents has links to step-by-step instructions on how to encode to Ogg with FireFogg, how to encode to H.264 with HandBrake, and how to encode to WebM with FFmpeg.

2. There are many other .mp4, .ogv, and .webm encoders to convert your video files. Many simply provide an easy-to-use front-end for FFmpeg. Just google "mp4 (or webm) encoding".

OTHER RESOURCES
I wrote my first video streaming tutorial in July 2009, if you're really bored. Going back to it shows how much times have changed. Other discussions of HTML 5 video include Mark Pilgrim's book chapter on HTML5 video, which is nicely done, but aging. [Aside: Mark Pilgrim took down many of his accounts and sites in early October 2011, but I have updated my links to point to community mirrors of his removed works.] Kroc Camen has written a similar tutorial from late 2010 called Video for Everybody. Jan Ozer (mentioned in the introduction) has written several good articles for streamingmedia.com on encoding videos, including this gem about optimal encoding for YouTube.

That's all for now. Good luck and have fun!


 

This page last modified
Wednesday, 29-May-2013 21:52:19 MDT