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.

Answer 1

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.