Publishing HTML5 video using FFMPEG27. Feb '16

Nowadays the web browser are capable of playing back video without additional plugins. As a content publisher you just have to make it sure that the videos are available in supported formats. Mozilla Firefox relies on royality-free OGG Theora and OGG Vorbis codecs for video and audio. For Google Chrome you need to use h264 video codec and AAC or MP3 audio codec. Note that in US where software patents apply, you need to pay license fee for using these patented codecs even if you're using open-source implementation!

VIDEO_HEIGHT=720

for j in $@; do \
    # Transcode for Firefox
    ffmpeg -i $j \
        -vcodec libtheora  -q:v 5 -vf scale=-2:$VIDEO_HEIGHT \
        -acodec libvorbis \
        transcode/$(basename $j .mov).ogv
    # Transcode for Chrome
    ffmpeg -i $j \
        -c:v libx264 -preset veryslow -tune film -vf scale=-2:$VIDEO_HEIGHT \
        -c:a copy \
        transcode/$(basename $j .mov).mp4
    # You might want to add WebM here as well, but oh well
done

Another script for generating nice looking index.html for listing the video files. Also make sure your webserver reports Content-Type header properly, see the mimetypes below in the HTML snippet.

POSTER_WIDTH=384
POSTER_HEIGHT=216

cat << EOF > transcode/index.html
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, user-scalable=no"/>
  </head>
  <body>
EOF

for j in korgem_kvaliteet/*/*; do \
    # Generate poster for the video
    ffmpeg -i $j \
        -ss 15 -vframes 1 -q:v 2 -vf scale=-2:$POSTER_HEIGHT \
        -y transcode/$(basename $j .mov).jpg

    cat << EOF >> transcode/index.html
    <div style="display: inline-block; float:left; width: 400px; height: 250px;">
    <h>$(basename $j .mov)</h>
    <br/>
    <video width="$POSTER_WIDTH" height="$POSTER_HEIGHT" controls poster="$(basename $j .mov).jpg">
      <source src="$(basename $j .mov).ogv" type="video/ogg">
      <source src="$(basename $j .mov).mp4" type="video/mp4">
    </video>
    </div>
EOF
done

cat << EOF >> transcode/index.html
  </body>
</html>
EOF
AAC Bash MP3 OGG HTML5 FFMPEG Xiph h264 Vorbis Theora