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.

Uninstall Old Versions

1
sudo apt-get remove ffmpeg x264 libx264-dev yasm

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

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

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

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

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

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

About McSwindler

Not only am I awesome, I do awesome stuff! Such as Web development with a little bit of design built in, and other programming on the side. I do enjoy games, but I don't play them as much as people assume I do. I am more a fan of old gaming and I sort of collect classic systems and games. Currently my focus is working as a Web Developer for SearchDex in Dallas, TX. Besides all of that, I like pie.

13 Responses to Convert Video to HTML5 in Ubuntu

DmitrySandalov says:

February 16, 2012 at 9:13 am

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

- McSwindler says:
  
  February 16, 2012 at 1:08 pm
  
  If I remember correctly, I had to use
  
  1
  mkdir /usr/local/lib/pkgconfig
  
  to create the directory for checkinstall.
  
  - DmitrySandalov says:
    
    February 16, 2012 at 3:20 pm
    
    That worked
    
    Also had to mkir these ones (V.lame, before line 9):
    mkdir /usr/local/share/doc
    mkdir /usr/local/share/doc/lame
    
    Do u mind if I repost the script to my blog as a howto to myself?
    With direct link: http://sandalov.org/blog/1184/
    
    - McSwindler says:
      
      February 16, 2012 at 3:22 pm
      
      I don’t mind at all.
      
Pingback: Convert Video to HTML5 in Ubuntu | sandalov.org
Liz says:

May 7, 2012 at 3:50 pm

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

- McSwindler says:
  
  May 7, 2012 at 4:02 pm
  
  By all means no. This is just a tutorial to help with uploading videos to your own website using HTML5 instead of flash.
  
  To be able to watch YouTube videos, you need to install a flash player plugin.
  
Max says:

August 9, 2012 at 9:30 am

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

Pedro Cunha says:

August 20, 2012 at 5:57 pm

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.

- can2nac says:
  
  June 17, 2014 at 6:46 pm
  
  had the same issue, solved by using
  ./configure –enable-static –disable-opencl
  
  instead of
  
  ./configure –enable-static
  
  taken from here https://lists.ffmpeg.org/pipermail/ffmpeg-user/2013-May/015385.html
  
Robin Holler says:

May 24, 2013 at 11:10 am

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

shrimpsizemoose says:

January 23, 2014 at 7:39 am

What do you need yasm for?

- McSwindler says:
  
  January 25, 2014 at 5:57 pm
  
  It’s the assembler used by x264 and FFmpeg