Embedding Video In a Site For iPhone/iPod? 68
Russ writes "Our corporate media delivery platform is in the process of being refactored (at long, long last), and one of the preferred requirements is the ability to serve streaming video to iPhone and iPod Touch devices, similar to the way YouTube does it — show a screen shot, and when the user taps it, the video should play full-screen and landscaped automatically. The problem comes from the severe lack of documentation Apple provides on how, precisely, this can be done. From what I can tell, YouTube still fires a Flash object to the iPhone despite its lack of Flash support. I have, to a certain extent, been able to review some of YouTube's Flash code and get a hack working on our platform (no screenshot, not landscape, but does play automatically), but I'm sure I'm missing a 'trick of the trade' somewhere that makes the process transparent to the user. Has anyone out there done this before, and if so, how? The standard (and non-standard) Quicktime object/embed codes seem to only provide partial functionality on the iPhone/iPod."
WTF? (Score:1, Informative)
Since when is Slashdot's front page USENET's macromedia.flash.actionscript [google.com]?
MPEG4 (Score:5, Informative)
All you need is a direct link to an Apple-compatible MPEG4 video with the correct mediatype on a server that supports the Range HTTP header. The iPhone/iPod's player will automatically start and allow seeking in the video.
We've been using this technique for a commercial IPTV service for about a year already.
someone didnt bother (Score:5, Informative)
to ask the source:
https://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/chapter_9_section_1.html#//apple_ref/doc/uid/TP40006514-SW1 [apple.com]
requires a login, etc but if your going to develop for an iphone you might as well save yourself some headbashing and sign up.
Re:AS Long as we're doing this--- (Score:2, Informative)
looks fairly simple:
script type='text/javascript' src='http://www.redtube.com/thumbchange.js'
you can see there is nothing fancy, you just use onmouseover to invoke the script (onmouseout to clean up), the rest is just taking snapshots of the video at set times.
Check Apple's website (Score:5, Informative)
http://developer.apple.com/safari/mobile.php [apple.com]
It's worth signing up for a free account, even if it's only to access Mobile Safari's documentation.
Embed player that works with iPhone (Score:3, Informative)
Check out veoh.com/iphone (Score:5, Informative)
You can point your non-iphone browser there to get a sense of how its done.
They've done a splendid job of letting people stream video directly from their site to the iphone simply by having every video on their site converted to Iphone-compatible quicktime (mp4) format. The video quality is even quite a step up from what youtube offers on the iphone.
JS + Quick Time Pro Export (Score:2, Informative)
first thing you will want to do is to do a browser check for 'iPhone' or 'iPod'. You can do this in JS but I prefer to check server side.
JS would be
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) { code for qt } else { code for flash }
PHP would be
if(eregi('iPhone', $_SERVER['HTTP_USER_AGENT']) || eregi('iPod', $_SERVER['HTTP_USER_AGENT'])) { code for qt } else { code for flash }
Next you will want to export your video using quick time pro and the "Export for web command" this will compress all versions for the iphone and ipod touch and a poster screen for the end user to click on.
Details are always nice... (Score:4, Informative)
Details are always nice... (Yes, there are far more options available!)
From mplayer:
mplayer -ss 60 -vo jpeg foo.mpg
Where:
-ss 60 starts 60 seconds into the video stream.
-vo jpeg outputs each frame as a jpeg image with the name 00000000.jpg.
Pick a bunch of winners... Motion blur can be a problem!
From ImageMagick:
convert -delay 10 -loop 0 000000{01,17,23,34,97}.jpg animated.gif
Where:
-delay 10 gives one frame every (10/100) or 0.1 seconds.
-loop 0 makes it repeat endlessly.
000000{01,17,23,34,97}.jpg are the source images.
animated.gif is the output file.
You may also want to use -geometry for resizing (making thumbnails). And perhaps -crop.
SWFObject (Score:2, Informative)
You should be using SWFObject.. it should work with your iphone if it is the latest updated version.
In JPEG, size=detail (Score:4, Informative)
Pick a bunch of winners... Motion blur can be a problem!
File size is a decent heuristic here. A frame with a lot of motion blur won't have higher frequencies, and so with a fixed-quantization encode like JPEG, it'll be a smaller file size.
The biggest files will correlate with the frames with the most detail, mathematically.
Now, that's not saying that it wouldn't be a tight shot of a screen window, but it's a start :).
Re:had to happen... (Score:5, Informative)
This is because all the followers of The Church of Steve Jobs are promoting anything iphone/apple on firehose.
Maybe, but if you step back for a moment, you will also find that the church of Adobe (Flash) and the church of Microsoft (Silverlight0 has an alternative: the church of open standards. As an example, take the following page:
http://lessig.blip.tv/file/1714232/ [lessig.blip.tv]
and then simply select "MPEG-4 video" as the format. It plays without any extra magic.
I may use an iPhone, but I am very pro open standards. Sure anyone can keep a local copy of the MPEG4 file, but this is where Creative Commons comes into play.