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
sudo apt-get remove ffmpeg x264 libx264-dev yasm
- Install Dependencies and Install Tools
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
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
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
- Install LAME
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
- Install libvpx
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
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="\"$filename.jpg\"" preload=""><source src="\"$filename.ogv\"" type="\"video/ogg\"" /><source src="\"$filename.webm\"" type="\"video/webm\"" /><source src="\"$filename.mp4\"" type="\"video/mp4\"" />" > "$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