Sitemap

This is a sitemap over all available pages ordered by namespaces.
This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== 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~~
notes/iphonevideo.txt · Last modified: 2018-10-12 08:44 by roland
This site uses Dokuwiki with a custom template based on "Arctic".