User Tools

Site Tools


notes:iphonevideo

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

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

Usage

./video.sh <INPUTFILE> <OUTPUTFOLDER>

Example

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

Discussion

Alban, 2013-11-01 01:39
This actually came up at the WebM suimmt today at Google HQ in Mountain View as something they want to do. I don't think they're any farther along in development than we are (and actually 36 hours behind). I mentioned the live notes on the FOMS website, and of course John Luther was there for the first day of discussions, so I don't think we'll get blind-sided by anything (especially if they want browser vendors to implement it), but those who are interested in this topic should probably approach them on the WebM mailing lists/IRC channel, etc., to coordinate things moving forward.
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?
Enter your comment:
 
  • Bookmark "iPhone 4S: Convert Video to HTML5 for streaming" at Google
  • Bookmark "iPhone 4S: Convert Video to HTML5 for streaming" at Facebook
  • Bookmark "iPhone 4S: Convert Video to HTML5 for streaming" at Twitter
notes/iphonevideo.txt · Last modified: 2013-09-12 02:33 by roland