HTML5 Video “Black Screen” on iPad

Question

I'm building a website that has videos embedded within them. This website needs to cater for iPad users as well but I'm having trouble with the ol' video tag at the moment. I have a video that plays fine in browsers but not on an iPad unfortunately.

I'm just getting a black screen with the iPad, and no error message to speak of.

Here is my code for the video:

<video id="movie" width="790" height="250" controls >
    <source src="anim/intro.ipad.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="anim/intro.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="anim/intro.theora.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>
<script>
    var v = document.getElementById("movie");
    v.onclick = function() {
        if (v.paused) {
            v.play();
        } else {
            v.pause();
        }
    };
</script>

The videos were all created following tutorials about HTML5 video. They were all encoded using preferred iPad settings on Miro Video converter.

Just incase this matters (I'm not sure it will) I'm testing the video on an iPad simulator.

No matter what I do, I just can't get the video to play:

Answer 1

Are you sure you got the encoding right?
Try this to test it:

<video src="anim/intro.ipad.mp4" controls>  
      Your browser does not support the video element.  
</video>  

Answer 2

is your .htaccess file serving up the particular video files correctly?

Ensure your server is using the correct mime-types. Firefox will not play the Ogg video if the mime-type is wrong. Place these lines in your .htaccess file to send the correct mime-types to browsers

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

Reference: Video for Everybody

Also, are you modifying the video element by using positioning? I've found that this creates this black video screen too.