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.

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

# 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:
ffmpegopts=" -strict -2 -threads 0"
if [ ! -f "$myfile" ]; then
  echo "Input video file \"$myfile\" not existing"
  exit 1
if [ ! -d "$myoutput" ]; then
  echo "Output folder \"$myoutput\" not existing"
  exit 1
mybasename=$(basename "$myfile")
echo "Rotating file"
ffmpeg -i $myfile -vf "transpose=1" $ffmpegopts $myrotated
echo "Reducing size to ${width}x${height}"
ffmpeg -i $myrotated -s "${width}x${height}" $ffmpegopts $myreduced
echo "Converting to mp4"
ffmpeg -i $myreduced $ffmpegopts $mymp4
echo "Converting to webm"
ffmpeg -i $myreduced $ffmpegopts $mywebm
echo "Converting to ogg"
ffmpeg -i $myreduced $ffmpegopts $myogg
echo "Creating poster"
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" />
    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>Download here
  <a href="$mymp4">$mymp4 (mp4)</a>
  <a href="$mywebm">$mywebm (WebM)</a>
  <a href="$myogg">$myogg (ogg)</a>




./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" />
    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>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>

The resulting files are


Let me know if this works for you.


Josh, 2013-09-10 18:13
This is a fantastic script, thanks. Do you know how to check if the video needs rotating? There's a flag in the video to alert Quicktime that the video was recorded in a certain orientation, but I don't know how to find that flag!

Any ideas?
notes/iphonevideo.txt ยท Last modified: 2018-10-12 08:44 by roland