video tag in iphone status

Question

Is there any movie that actually works in iPhone/iPad safari using the video tag? We tried so many formats and code snippets. I've heard that mp4/h264 should work, but not for us.

Can anyone point me to a working example online?

If you know the code or specs/formats for the videotag on iphone, that would be great.

Update:

Here is a link to the mp4 file we have: http://aino.se/media/207.mp4 Here is the latest code we tried:

<video width="480" height="270" controls autoplay>
    <source src="http://aino.se/media/207.mp4" type="video/mp4">
</video>

Works great in Safari/Chrome but no show in iPhone/iPod

Answer 1

Apple has a list of sites that use HTML5 to work properly with iPad: http://www.apple.com/ipad/ready-for-ipad/

HTML5's video tag with a h264 source should work just fine.

Answer 2

The video tag works on the iPad and iOS4, not iPhone OS 3.1 and earlier.

Answer 3

The fact that the videos are working on desktop versions of Chrome and Safari suggest that the problem is how your videos are encoded. While the iPhone and iPad support H.264 video via HTML5, they only support the most baseline profile available. This means that extra things you can do to make the video look better (like extra Reference Frames, B-Frames, CABAC, etc) all render the video unplayable on iOS.

What encoding software are you using? I would try encoding the videos again with the most vanilla settings available: set an average bit rate, keep the FPS the same, and maybe do a two-pass if you think it'll help with quality. Everything beyond that is pretty shaky ground.

Edit: As for examples, vimeo.com has all of their videos in an iPhone-ready format.

Answer 4

Yes, the video tag works. www.sup.com.tw has some (not all. The site is in Chinese though. Click the video links on the top right hand corner.)

Newer videos on this site works with IE 6/7/8 (through fall back to flash player, not tested on IE9), Firefox (had to render a separate ogv file since no h.264 support), Safari, Chrome, iPhone Safari, Android browser (the Desire model, didn't figure out the browser type).

Problem is with your encoding. Look at this page for detail instructions on how to convert:

http://diveintohtml5.org/video.html

The key I think is the profile of the h.264 conversion. Need to make sure you're converting to Baseline profile. Other profiles are not supported in iPhone.

I used the handbrakeCLI with Automator in Mac OS X to batch render.