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
- Install Dependencies and Install Tools
- Install Yasm
- Install x264
- Install LAME
- Install libvpx
- Install ffmpeg
sudo apt-get remove ffmpeg x264 libx264-dev yasm
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
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
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
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
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
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