Video Conversion for HTML5 video

I always seem to misplace my notes on the various steps necessary to create HTML5 video. This is mostly to jog my own memory, but I'm posting it here in case it is of use to anyone else.

Installation

There are open source video converters with a GUI, but I haven't found one that does what I need it to do.

I'm using ffmpeg, which can be installed on OS X using Homebrew:

brew install ffmpeg --with-x264 --with-libfdk-aac --with-theora --with-libvorbis --with-libvpx

Video Conversion

#!/bin/bash

# h.264
ffmpeg -i INPUT.EXT -vf "scale=trunc((oh*a)/2)*2:480" \  
       -pix_fmt yuv420p -c:v libx264 -preset:v slow \
       -profile:v baseline -x264opts \
       level=3.0:vbv-maxrate=1280:vbv-bufsize=6400:ref=1 \
       -b:v 960k -movflags faststart -an -pass 1 OUTPUT.mp4

ffmpeg -y -i INPUT.EXT -vf "scale=trunc((oh*a)/2)*2:480" \  
       -pix_fmt yuv420p -c:v libx264 -preset:v slow \
       -profile:v baseline -x264opts \
       level=3.0:vbv-maxrate=1280:vbv-bufsize=6400:ref=1 \
       -b:v 960k -movflags faststart -c:a libfdk_aac \
       -b:a 128k -ar 44100 -pass 2 OUTPUT.mp4

# VP8
ffmpeg -i INPUT.EXT -vf "scale=trunc((oh*a)/2)*2:480" \  
        -f webm -vcodec libvpx -b:v 960k -an -pass 1 \
        OUTPUT.webm 

ffmpeg -y -i INPUT.EXT -vf "scale=trunc((oh*a)/2)*2:480" \  
        -f webm -vcodec libvpx -b:v 960k -acodec libvorbis \
        -b:a 128k -ar 44100 -pass 2 OUTPUT.webm 

# Theora
ffmpeg -i INPUT.EXT -vf "scale=trunc((oh*a)/2)*2:480" \  
        -f ogg -vcodec libtheora -b:v 960k -an -pass 1 \
        OUTPUT.ogv 

ffmpeg -y -i INPUT.EXT -vf "scale=trunc((oh*a)/2)*2:480" \  
        -f ogg -vcodec libtheora -b:v 960k -acodec \ 
        libvorbis -b:a 128k -ar 44100 -pass 2 OUTPUT.ogv 

# Thumbnails
ffmpeg -i INPUT.EXT \  
        -vf "thumbnail,scale=trunc((oh*a)/2)*2:480" \
        -frames:v 3 OUTPUT%03d.png

You can adjust different settings above for higher or lower quality. These settings seem to be pretty good balance of quality vs size for the videos I normally do.

Web Page Embedding

The easiest way to embed video is using Video.js.
Documentation

<!DOCTYPE html>  
<html>  
<head>  
  ...
  <link href="http://vjs.zencdn.net/4.0/video-js.css" rel="stylesheet">
  <script src="http://vjs.zencdn.net/4.0/video.js"></script>
</head>  
<body>  
  <video id="example_video_1" class="video-js vjs-default-skin"
    controls preload="auto" width="640" height="264"
    poster="http://video-js.zencoder.com/oceans-clip.png"
    data-setup='{"example_option":true}'>
   <source src="http://video-js.zencoder.com/oceans-clip.mp4"  type='video/mp4'  />
   <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
   <source src="http://video-js.zencoder.com/oceans-clip.ogv"  type='video/ogg'  />
  </video>
...
</body>

A Note on MIME Types

You might have an issue with the video not play if the server your videos are hosted on does not pass the correct content type. Recent versions of nginx or Apache will usually set these correctly, but you may need to add Webm or Ogg to an older version. The correct types are:

ExtensionMIME Type
.mp4video/mp4
.ogvvideo/ogg
.webmvideo/webm

If you host your videos on Amazon S3, you will need to manually set the MIME types. You should also set Content-Disposition to Inline.

If you use a Transmit to upload your videos, it can be configured to automatically set the content type.

References