iPhone 4S: Convert Video to HTML5 for streaming

When presented with the task of showing an iPhone 4S video to someone under the following circumstances:

• Video should be embedded on a website
• Recipient person does not have a Youtube or FB account
• Video is somewhat private, so no public access is desired
• Target browser is not known; however, embedding with the HTML5 <video> tag (see here) is much preferred over flash.
• Video has been shot holding the iPhone in portrait mode, so movie needs to be rotated
• Resulting files should be small, movie needs to be resized
• PCs in reach have Linux installed

Downloading the videos using Linux is easy using ifuse:

As root, type:

  mkdir /mnt/temp
  ifuse /mnt/temp
 
  mkdir ~/iphone-videos
  cp /mnt/temp/DCIM/100APPLE/*.MOV ~/iphone-videos
 
  umount /mnt/temp

I ended up with a script which does:

• rotate by 90 degree to the left
• resize to 540×960
• create a OGG, MP4 and WebM version
• extract a single frame for preview
• generate the HTML5 code for embedding the video on own web space

The script uses ffmpeg, I have tested it to work with ffmpeg version 1.1.3, included in Arch Linux.

#!/bin/bash
# 
# Script to rotate and resize an video file and create an ogg, mp4 and webm version.
# HTML5 code for embedding will be generated as well as an single frame extracted 
# for preview (poster).
#
# Roland Eckert <roland.eckert ;-) gmail.com>
#
# Usage:
# ./video.sh <INPUTFILE> <OUTPUTFOLDER>
 
width=540
height=960
 
myfile=$1
myoutput=$2
 
ffmpegopts=" -strict -2 -threads 0"
 
 
if [ ! -f "$myfile" ]; then
  echo "Input video file \"$myfile\" not existing"
  exit 1
fi
 
if [ ! -d "$myoutput" ]; then
  echo "Output folder \"$myoutput\" not existing"
  exit 1
fi
 
mybasename=$(basename "$myfile")
myfilename="${mybasename%.*}"
myextension="${mybasename##*.}"
 
echo "Rotating file"
myrotated=$myoutput/${myfilename}.rotated.${myextension}
ffmpeg -i $myfile -vf "transpose=1" $ffmpegopts $myrotated
 
echo "Reducing size to ${width}x${height}"
myreduced=$myoutput/${myfilename}.reduced.${myextension}
ffmpeg -i $myrotated -s "${width}x${height}" $ffmpegopts $myreduced
 
echo "Converting to mp4"
mymp4=$myoutput/${myfilename}.mp4
ffmpeg -i $myreduced $ffmpegopts $mymp4
 
echo "Converting to webm"
mywebm=$myoutput/${myfilename}.webm
ffmpeg -i $myreduced $ffmpegopts $mywebm
 
echo "Converting to ogg"
myogg=$myoutput/${myfilename}.ogg
ffmpeg -i $myreduced $ffmpegopts $myogg
 
echo "Creating poster"
myposter=$myoutput/${myfilename}.jpg
ffmpeg -i $myreduced -vframes 1 -an -ss 30 $myposter
 
echo "Housekeeping"
rm $myrotated
rm $myreduced
 
cat <<EOM
 
Embed the video with:
 
<video controls="controls" autoplay="autoplay" autobuffer="autobuffer" 
  width="$width" height="$height" poster="$myposter">
  <source src="$mymp4" type="video/mp4" />
  <source src="$mywebm" type='video/webm; codecs="vp8.0, vorbis"' />
  <source src="$myogg" type="video/ogg" />
  <div>
    Video not playing? Try one of the 
    <a href="http://en.wikipedia.org/wiki/HTML5_video#Browser_support">supported 
    browsers</a> or download below.
  </div>
</video>
 
<div>Download here
  <a href="$mymp4">$mymp4 (mp4)</a>
  <a href="$mywebm">$mywebm (WebM)</a>
  <a href="$myogg">$myogg (ogg)</a>
</div>
 
EOM

./video.sh <INPUTFILE> <OUTPUTFOLDER>

./video.sh IMG_0622.MOV ./videos

This will produce a lot of interesting output, at the end the HTML code needed for embedding and the rotated, resized and converted video files plus a single frame for the preview (poster).

<video controls="controls" autoplay="autoplay" autobuffer="autobuffer" width="540" 
  height="960" poster="videos/IMG_0622.jpg">
  <source src="videos/IMG_0622.mp4" type="video/mp4" />
  <source src="videos/IMG_0622.webm" type='video/webm; codecs="vp8.0, vorbis"' />
  <source src="videos/IMG_0622.ogg" type="video/ogg" />
  <div>
    Video not playing? Try one of the 
    <a href="http://en.wikipedia.org/wiki/HTML5_video#Browser_support">supported 
    browsers</a> or download below.
  </div>
</video>
 
<div>Download here 
  <a href="videos/IMG_0622.mp4">videos/IMG_0622.mp4 (mp4)</a> 
  <a href="videos/IMG_0622.webm">videos/IMG_0622.webm (WebM)</a>
  <a href="videos/IMG_0622.ogg">videos/IMG_0622.ogg (ogg)</a>
</div>

The resulting files are

./videos/IMG_0622.jpg
./videos/IMG_0622.mp4
./videos/IMG_0622.ogg
./videos/IMG_0622.webm

Let me know if this works for you.