Publishing HTML5 video using FFMPEG27. Feb '16
Nowadays the web browser are capable of playing back video without additional plugins. As a content publisher you just have to make it sure that the videos are available in supported formats. Mozilla Firefox relies on royality-free OGG Theora and OGG Vorbis codecs for video and audio. For Google Chrome you need to use h264 video codec and AAC or MP3 audio codec. Note that in US where software patents apply, you need to pay license fee for using these patented codecs even if you're using open-source implementation!
VIDEO_HEIGHT=720
for j in $@; do \
# Transcode for Firefox
ffmpeg -i $j \
-vcodec libtheora -q:v 5 -vf scale=-2:$VIDEO_HEIGHT \
-acodec libvorbis \
transcode/$(basename $j .mov).ogv
# Transcode for Chrome
ffmpeg -i $j \
-c:v libx264 -preset veryslow -tune film -vf scale=-2:$VIDEO_HEIGHT \
-c:a copy \
transcode/$(basename $j .mov).mp4
# You might want to add WebM here as well, but oh well
doneAnother script for generating nice looking index.html for listing the video files. Also make sure your webserver reports Content-Type header properly, see the mimetypes below in the HTML snippet.
POSTER_WIDTH=384
POSTER_HEIGHT=216
cat << EOF > transcode/index.html
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, user-scalable=no"/>
</head>
<body>
EOF
for j in korgem_kvaliteet/*/*; do \
# Generate poster for the video
ffmpeg -i $j \
-ss 15 -vframes 1 -q:v 2 -vf scale=-2:$POSTER_HEIGHT \
-y transcode/$(basename $j .mov).jpg
cat << EOF >> transcode/index.html
<div style="display: inline-block; float:left; width: 400px; height: 250px;">
<h>$(basename $j .mov)</h>
<br/>
<video width="$POSTER_WIDTH" height="$POSTER_HEIGHT" controls poster="$(basename $j .mov).jpg">
<source src="$(basename $j .mov).ogv" type="video/ogg">
<source src="$(basename $j .mov).mp4" type="video/mp4">
</video>
</div>
EOF
done
cat << EOF >> transcode/index.html
</body>
</html>
EOF