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:

on iPad Simulator

i think controlling html5 audio and video from javascript doesnt work in mobile safari. it can work in UIWebView if you set mediaPlaybackRequiresUserAction to NO. — at0mzk
It's a website that needs to be compatible with iPads, it's not an app that uses a UIWebView — Dan Hanly
@at0mzk: false they work just fine. I have it working on mine — Petrogad

gnur gnur · Accepted Answer · 2011-02-22T11:49:09

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>

HTML5 Video “Black Screen” on iPad

2 Answers