Convert Video to HTML5 in Ubuntu

By: McSwindler

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

    1
    sudo apt-get remove ffmpeg x264 libx264-dev yasm
  2. Install Dependencies and Install Tools

    1
    2
    3
    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
  3. Install Yasm

    1
    2
    3
    4
    5
    6
    7
    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
  4. Install x264

    1
    2
    3
    4
    5
    6
    7
    cd ~/Downloads
    git clone git://git.videolan.org/x264
    cd x264
    ./configure --enable-static
    make
    sudo checkinstall --pkgname=x264 --default --pkgversion="3:$(./version.sh | \
        awk -F'[" ]' '/POINT/{print $4"+git"$5}')" --backup=no --deldoc=yes
  5. Install LAME

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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 checkinstall --pkgname=lame-ffmpeg --pkgversion="3.99" --backup=no --default \
        --deldoc=yes
  6. Install libvpx

    1
    2
    3
    4
    5
    6
    7
    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
  7. Install ffmpeg

    1
    2
    3
    4
    5
    6
    7
    8
    9
    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.

Sidenote: You may have to create some directories if you get a “No such file or directory” error. Just use the mkdir command and re-run the prior command.

The Script

Usage:

1
./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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
#!/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 "<video controls poster=\"$filename.jpg\" preload>" > "$directory/$filename.html"
    echo "  <source type=\"video/ogg\" src=\"$filename.ogv\">" >> "$directory/$filename.html"
    echo "  <source type=\"video/webm\" src=\"$filename.webm\">" >> "$directory/$filename.html"
    echo "  <source type=\"video/mp4\" src=\"$filename.mp4\">" >> "$directory/$filename.html"
    echo "  Sorry, your browser does not support HTML5 video" >> "$directory/$filename.html"
    echo "</video>" >> "$directory/$filename.html"
   
    echo "All Done!"
else
    echo "Usage: [filename]"
fi

12 Responses to Convert Video to HTML5 in Ubuntu

  1. DmitrySandalov says:

    Had errors after line 6 in IV Install x264:
    install: cannot change permissions of `/usr/local/lib/pkgconfig’: No such file or directory

    Going to Google it. Probably checkinstall issue. Ubuntu 11.10, x86_64

  2. Pingback: Convert Video to HTML5 in Ubuntu | sandalov.org

  3. Liz says:

    I’m new to Ubuntu, just had it for a day or so, am I correct in understanding that if I want to watch a youtube video I have to download all the of the above?
    To convert the codes into video form? In order to watch it? Or is there something that I’m not doing now, because right now I cannot see anything I go to youtube and I see a box no video shows, advice for a newbie would be appreciated. Liz

  4. Max says:

    Thanks for the great script! I had to add 10# to the $minutes, because bash interprets values starting with a 0 as octal, so I ended up using this:

    minutes=$(((10#$minutes)*60))

    Probably also makes sense to do the same with $hours and $seconds.

    Max

  5. Pedro Cunha says:

    When trying to configure ffmpeg, I’m getting this:

    ERROR: libx264 not found

    If you think configure made a mistake, make sure you are using the latest
    version from Git. If the latest version fails, report the problem to the
    ffmpeg-user@ffmpeg.org mailing list or IRC #ffmpeg on irc.freenode.net.
    Include the log file “config.log” produced by configure as this will help
    solving the problem.

    I’m using Ubuntu 11.04.

  6. Robin Holler says:

    @Pedro: try configuring x264 with –enable-shared!

  7. What do you need yasm for?

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

 
Δ
Back to Top