title: HTML5 Video "Black Screen" on iPad
body: <p>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' <code>video</code> tag at the moment. I have a video that plays fine in browsers but not on an iPad unfortunately.</p>
  
  <p>I'm just getting a black screen with the iPad, and no error message to speak of.</p>
  
  <p>Here is my code for the video:</p>
  
  <pre><code>&lt;video id="movie" width="790" height="250" controls &gt;
      &lt;source src="anim/intro.ipad.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'&gt;
      &lt;source src="anim/intro.webm" type='video/webm; codecs="vp8, vorbis"'&gt;
      &lt;source src="anim/intro.theora.ogv"  type='video/ogg; codecs="theora, vorbis"'&gt;
  &lt;/video&gt;
  &lt;script&gt;
      var v = document.getElementById("movie");
      v.onclick = function() {
          if (v.paused) {
              v.play();
          } else {
              v.pause();
          }
      };
  &lt;/script&gt;
  </code></pre>
  
  <p>The videos were all created following tutorials about HTML5 video. They were all encoded using preferred iPad settings on Miro Video converter.</p>
  
  <p>Just incase this matters (I'm not sure it will) I'm testing the video on an iPad simulator.</p>
  
  <p>No matter what I do, I just can't get the video to play:</p>
  
  <p><img src="https://i.stack.imgur.com/H1wSt.png" alt="on iPad Simulator"></p>