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!


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

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.


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

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>
    <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">

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