Create video files
To be compatible to almost any device and os, we will
create three converted versions of the video file using ffmpeg.
a script like this will create them:
#!/bin/bash
INPUTFILE="$1"
if [ "x" = "x$INPUTFILE" ] ; then
echo error: you need to name an input file
exit 1
fi
OUTPUTFILE="$(basename $INPUTFILE | sed 's/\.[a-z0-9]*$/__converted/g')"
echo $OUTPUTFILE
echo
echo
echo now converting to MP4 format...
echo
avconv \
-threads 4 \
-i "$INPUTFILE" \
-i_qfactor 0.71 \
-qcomp 0.6 \
-qmin 10 \
-qmax 63 \
-qdiff 4 \
-trellis 0 \
-vcodec libx264 \
-s 720x576 \
-b:v 8000k \
-b:a 56k \
-ar 22050 \
"$OUTPUTFILE.mp4"
echo
echo
echo now converting to OGV format...
echo
avconv \
-i "$INPUTFILE" \
-s 720x576 \
-qmax 63 \
-b:v 8000k \
-b:a 56k \
-ar 22050 \
-acodec libvorbis \
"$OUTPUTFILE.ogv"
Put the video onto your website
Then copy the files to the server and embed a videotag like this:
<video id="sampleMovie" width="640" height="360" preload controls> <source src="/cms/video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /> <source src="/cms/video.ogv" type='video/ogg; codecs="theora, vorbis"' /> </video>
Embedded via html5 video tag:
MP4:
OGV:
MP4 + OGV:
Further references:
Very good test page
Article for video conversion
Reference for HTML5 Tags