title: Multiple Html5 Videos not playing on ipad (but read on as i know the video is encoded properly)
body: <p>I have followed many a tutorial to make sure that this is correct but this simply isn't working for me.
  The code below works if I paste it into a fresh html page on the samer server (and this is cut and paste from the generated source):</p>
  
  <pre><code>&lt;source src='http://turner.bionic-comms.co.uk/vids/rc/rc-iPhone.m4v'  type="video/mp4" /&gt; 
  &lt;source src='http://turner.bionic-comms.co.uk/vids/rc/rc.mp4'  type="video/mp4" /&gt; 
  &lt;source width='254' height='143' src='http://turner.bionic-comms.co.uk/vids/rc/rc.ogg'  type="video/ogg" /&gt; 
  &lt;object width="254" height="143" type="application/x-shockwave-flash" data="http://turner.bionic-comms.co.uk/vids/video_player/video_player.swf"&gt; 
  
  &lt;!-- Firefox uses the `data` attribute above, IE/Safari uses the param below --&gt; 
  &lt;param name="movie" value="http://turner.bionic-comms.co.uk/vids/video_player/video_player.swf" /&gt; 
  &lt;param name="allowFullScreen" value="true" /&gt; 
  &lt;param name="flashvars" value="file=http://turner.bionic-comms.co.uk/vids/rc/rc.flv&amp;image=http://turner.bionic-comms.co.uk/vids/rc/rc-poster.jpg" /&gt; 
  
  &lt;!-- Fallback image. --&gt; 
  &lt;img src="telematics_desktop.jpg" width="254" height="143" alt="telematics" title="No video playback capabilities." /&gt; 
  </code></pre>
  
  <p>However, if I dynamically generate this code to have multiple videos on the page it breaks and doesn't play. I just get a black box.
  The images are contained within a jquery booklet with pageturns.</p>
  
  <p>Does anyone have any idea how I can sort this and get it playing? It works in safari and chrome.
  Thanks</p>