Convert Video to HTML5 in Ubuntu

I wanted an easy way to convert videos to HTML5 formats (mp4/ogg/webm). With Linux, I could easily create a bash script to do all three and even create a screencap for the poster attribute.

The install process is a bit tedious and time consuming, but after it’s all installed you’re good to run the script for all your videos. The script uses ffmpeg to convert to all 3 formats, and it supports most any video format. The script also uses ffmpeg to generate a random screenshot, and even writes the HTML5 code for you.

Installation

For the most part, this portion of the tutorial was derived from the Ubuntu Forums.

  1. Uninstall Old Versions
  2. sudo apt-get remove ffmpeg x264 libx264-dev yasm
  3. Install Dependencies and Install Tools
  4. sudo apt-get update
    sudo apt-get install build-essential git-core checkinstall texi2html libfaac-dev \
        libopencore-amrnb-dev libopencore-amrwb-dev libsdl1.2-dev libtheora-dev \
        libvorbis-dev libx11-dev libxfixes-dev zlib1g-dev
  5. Install Yasm
  6. cd ~/Downloads
    wget http://www.tortall.net/projects/yasm/releases/yasm-1.2.0.tar.gz
    tar xzvf yasm-1.2.0.tar.gz
    cd yasm-1.2.0
    ./configure
    make
    sudo checkinstall --pkgname=yasm --pkgversion="1.2.0" --backup=no --deldoc=yes --default
  7. Install x264
  8. cd ~/Downloads
    git clone git://git.videolan.org/x264
    cd x264
    ./configure --enable-static
    make
    sudo mkdir /usr/local/lib/pkgconfig
    sudo checkinstall --pkgname=x264 --default --pkgversion="3:$(./version.sh | \
        awk -F'[" ]' '/POINT/{print $4"+git"$5}')" --backup=no --deldoc=yes
  9. Install LAME
  10. sudo apt-get remove libmp3lame-dev
    sudo apt-get install nasm
    cd ~/Downloads
    wget http://downloads.sourceforge.net/project/lame/lame/3.99/lame-3.99.tar.gz
    tar xzvf lame-3.99.tar.gz
    cd lame-3.99
    ./configure --enable-nasm --disable-shared
    make
    sudo mkdir /usr/local/share/doc
    sudo mkdir /usr/local/share/doc/lame
    sudo checkinstall --pkgname=lame-ffmpeg --pkgversion="3.99" --backup=no --default \
        --deldoc=yes
  11. Install libvpx
  12. cd ~/Downloads
    git clone http://git.chromium.org/webm/libvpx.git
    cd libvpx
    ./configure
    make
    sudo checkinstall --pkgname=libvpx --pkgversion="$(date +%Y%m%d%H%M)-git" --backup=no \
        --default --deldoc=yes
  13. Install ffmpeg
  14. cd ~/Downloads
    git clone --depth 1 git://source.ffmpeg.org/ffmpeg
    cd ffmpeg
    ./configure --enable-gpl --enable-libfaac --enable-libmp3lame --enable-libopencore-amrnb \
        --enable-libopencore-amrwb --enable-libtheora --enable-libvorbis --enable-libvpx \
        --enable-libx264 --enable-nonfree --enable-postproc --enable-version3 --enable-x11grab
    make
    sudo checkinstall --pkgname=ffmpeg --pkgversion="$(date +%Y%m%d%H%M)-git" --backup=no \
        --deldoc=yes --default

    The part that will take the longest is the ffmpeg, so be prepared to wait.

    The Script

    Usage:

    ./convertHTML5 video-file.ext

    The script will output “video-file.ogv”, “video-file.webm”, “video-file.mp4″, and “video-file.html” while keeping the original video intact. The HTML document just has the plain <video> code with nothing else, easily copied and pasted.

    #!/bin/bash
    
    if [[ $1 ]]
    then
        filename=$(basename "$1")
        filename=${filename%.*}
        directory=$(dirname "$1")
    
        duration=$(ffmpeg -i "$1" 2>&1 | grep Duration | awk '{print $2}' | tr -d ,)
        minutes=${duration%:*}
        hours=${minutes%:*}
        minutes=${minutes##*:}
        seconds=${duration##*:}
        seconds=${seconds%.*}
    
        hours=$((hours*3600))
        minutes=$((minutes*60))
    
        total=$(expr $hours + $minutes + $seconds)
        number=$RANDOM
        let "number %= $total"
    
        echo "Generating thumbnail"
        ffmpeg -i "$1" -deinterlace -an -ss $number -t 00:00:01 -r 1 -y -vcodec mjpeg -f mjpeg "$directory/$filename.jpg" 2>&1
        echo "Converting $filename to ogv"
        ffmpeg -i "$1" -acodec libvorbis -ac 2 -ab 96k -ar 44100 -b 345k "$directory/$filename.ogv"
        echo "Finished ogv"
    
        echo "Converting $filename to webm"
        ffmpeg -i "$1" -acodec libvorbis -ac 2 -ab 96k -ar 44100 -b 345k "$directory/$filename.webm"
        echo "Finished webm"
    
        echo "Converting $filename to h264"
        ffmpeg -i "$1" -acodec libfaac -ab 96k -vcodec libx264 -level 21 -refs 2 -b 345k -bt 345k -threads 0 "$directory/$filename.mp4"
        echo "Finished h264"
    
        echo "Writing HTML..."
    
        echo "</pre>
    <video width="320" height="240" controls="controls" poster="\&quot;$filename.jpg\&quot;" preload=""><source src="\&quot;$filename.ogv\&quot;" type="\&quot;video/ogg\&quot;" /><source src="\&quot;$filename.webm\&quot;" type="\&quot;video/webm\&quot;" /><source src="\&quot;$filename.mp4\&quot;" type="\&quot;video/mp4\&quot;" />" > "$directory/$filename.html"
     echo " " >> "$directory/$filename.html"
     echo " " >> "$directory/$filename.html"
     echo " " >> "$directory/$filename.html"
     echo " Sorry, your browser does not support HTML5 video" >> "$directory/$filename.html"
     echo "</video>
    <pre>" >> "$directory/$filename.html"
    
        echo "All Done!"
    else
        echo "Usage: [filename]"
    fi

    Credits: McSwindler

Tagged , , , , , , , , , . Bookmark the permalink.

7 Responses to Convert Video to HTML5 in Ubuntu

  1. ben says:

    great blog, bookmarked it to show my friend

  2. Rasmus says:

    Thanks, quite handy. To bring it up to speed with the latest ffmpeg -b should be changed to -b:v and -deinterlace to -filter:v yadif

    Also, the mp4 generated won’t play on iphone/ipad. I had to change it to this:


    ffmpeg -i "$1" -acodec aac -ab 160000 -vcodec libx264 -vpre ipod640 -b:v 345k -threads 0 -pix_fmt yuv420p -f mp4 -strict -2 "$directory/$filename.mp4"

  3. Thank you for this great tutorial!

    I had to install x264 with “–enable-shared”. Otherwise installing ffmpeg would fail with “libx264 not found”.

    Thanks again 🙂

  4. Nekrofage says:

    Thanks you for your tuto.
    The script works on Ubuntu 12.04 LTS.

  5. bestautumnn says:

    Have you tried Avdshare?
    It will show you a step by step guide on how to find and download the right ogv to mp4 videos as well as add ogv to MP4. In fact, this guide also applies to add subtitles to AVI, MKV, WTV, WMV, VOB, MPG, MOV, DV, FLV, WebM, OGV, and etc.

Leave a Reply

Your email address will not be published. Required fields are marked *