HTML5 video playback on the iPad?

Question

I'm developing a web app, and having trouble with HTML5 video for iPad. This code works fine every where else, not iPad. I just get a video frame, a black box. The HTML is generated in javascript, it is not hardcoded per se.

<video preload="true" src="places/video.mp4" class="c1" id="it" height="480" width="385" controls="">
</video>

Anyone know what could be wrong? (Videos are encoded using handbrake CLI and ffmpeg2theora as specified in Dive Into HTML5).

I think the issue is that it isn't http://serverlocation/places/video.ext. How would I alter it to look like that (with no guarantee that I know server location.) Part of me doubts this because images are served without the http:// and they work fine.

Are the videos using the Theora codec? The iPad does not support Theora. They should be in h.264. See tipb.com/2010/05/01/… — Colin
There is both h.264/aac and ogg theora. iPad only sees the first source which is mp4. I disabled the type for mp4, because it works in diveintohtml5.org/video.html (last example) for android too. (haven't tested on android yet) — Jeremy Rubin
Silly question, but video.mp4 does exist, right? Try adding type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' to the .mp4 <source> tag. — stslavik
Yes, of course! Type doesn't help :/ Do you think the fact it isn't loaded on pageload is an issue? — Jeremy Rubin

stslavik stslavik · Accepted Answer · 2011-08-26T16:20:12

I think I know the problem. iPad chokes when presented with multiple <source> tags. What you can do (to do it simply) is use jQuery to add/remove objects.

HTML:

<div id="movie-wrapper">
  <div id="webkit-wrapper">
    <video width="480" height="360" controls="controls" src="places/video.mp4"></video>
  </div>
  <div id="other-wrapper">
    <!-- Do your video in a new wrapper for all others -->
  </div>
</div>

JS:

$(document).ready( function(){
  if($.browser.webkit) {
    $('#other-wrapper').remove();
  } else {
    $('#webkit-wrapper').remove();
  }
});

Ideally, you're going to have a conditional for every major browser since you need at least three types of video for complete compatibility. But something like this should resolve the iPad webkit choke.

Edit Rereading your comment, I want to make sure of something – that you have controls="controls" on the video element as above. From everything I've read, iPad requires that to enable playback. Otherwise, you get... a black screen.

And you might also look into whether there's an encoding problem, per HTML5 Video "Black Screen" on iPad

Edit Other considerations: Webserver may not be reporting the filetype properly (you can check this in the error console if it transfers with a warning about type)

If a poster is loading, try directly accessing the link to the mp4 video (see if quicktime plays it in the browser).

Other than that, I have no idea – there's going to continue to be miscommunication of facts unless you post a link to your page with the non-working example.

HTML5 video playback on the iPad?

1 Answers