====== iPhone 4S: Convert Video to HTML5 for streaming ======

===== Challenge =====

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 [[http://en.wikipedia.org/wiki/HTML5_video|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

===== Outcome =====

Downloading the videos using Linux is easy using [[http://www.libimobiledevice.org/|ifuse]]:

As root, type:
<code bash>
  mkdir /mnt/temp
  ifuse /mnt/temp
  
  mkdir ~/iphone-videos
  cp /mnt/temp/DCIM/100APPLE/*.MOV ~/iphone-videos
  
  umount /mnt/temp
</code>

I ended up with a script which does:

  * rotate by 90 degree to the left
  * resize to 540x960
  * 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.

==== Script to convert iPhone video to HTML5 (OGG, MP4, WebM) ====

<code bash>

#!/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
</code>

==== Usage ====

<code bash>./video.sh <INPUTFILE> <OUTPUTFOLDER></code>

==== Example ====

<code bash>./video.sh IMG_0622.MOV ./videos</code>

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).

<code html>
<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>
</code>

The resulting files are

<code bash>
./videos/IMG_0622.jpg
./videos/IMG_0622.mp4
./videos/IMG_0622.ogg
./videos/IMG_0622.webm
</code>

Let me know if this works for you.

~~DISCUSSION:closed~~