Problem streaming online videos to the iphone

Question

We have a whole catalogue of videos which we would like to stream to an iphone for showing on the move, this would be done inside the iphone's safari browser.

For some reason I have not been able to find anything decent online to show how this is done, we have the videos converted to formats the iphone can see .m4v and .3gp (both converted using quicktime)

But i'm not sure how to embed the videos in a webpage so that the iphone can open them in the built in quick time player.

I attempted the code below, but safari returns an error stating "safari is unable to download this file"

<script src="AC_QuickTime.js" language="JavaScript" type="text/javascript"></script> 
<script language="javascript"> 
<!-- 
var ua = navigator.userAgent ;
if (ua.indexOf("iPhone") > 0) document.location.replace("iolliecell.3gp");
self.moveTo(0,0);
self.resizeTo(screen.width,window.screen.availHeight);
//-->
</script> 

<script language="javascript"> 
QT_WriteOBJECT('ollie.mp4', '100%','95%', '', 'autoplay', 'true', 'bgcolor', 'black', 'scale', 'aspect');
</script> 

Answer 1

You can't embed video on the iPhone, only the video player can "play video", and it requires access to the full screen.

Answer 2

As far as I know, you shouldn't have to do anything to make it compatible as long as it's using a certain codec (m4v should be fine). The iPhone handles the embed tag accordingly. What will happen is it'll show the area of the video and a play button in the middle of that area. Clicking the video will open the video player in full screen. When the movie finishes, it goes back to the webpage. I'll try and find something in Apple's documentation that discusses this.

Edit: Apple has information on media in Safari here. Hope this helps.

Edit 2: This is essentially all you need.

<embed src="poster.jpg" href="movie.m4v" type="video/x-m4v" />

In addition to playing "movie.m4v" when clicked on, it will also show "poster.jpg" on the webpage instead of the gray box I was referring to before.

If you're going to be designing web applications for the iPhone, you will want to sign up for an ADC account. It's free, and it gives you access to documentation such as this. While the link I sent you deals with how to add a preview image, it references a more detailed guide which discusses issues such as supported codecs, what bit rate to use, server configuration, and more.

You can verify this is working by visiting the website in question on any iPhone/iPod Touch and seeing what it looks like. You can even use the iPhone simulator to do this (also free to download).