title: playing video on Android and iOS with html5
body: <p>I'm trying to play video on both iOS and Android devices.  I have an html table, if you click on a row it opens up a player that you can start with the corresponding video.  iOS works great with the code below but Android gives weird behavior where it opens up the player and a weird giant play button out of position. Any ideas?</p>
  
  <pre><code>&lt;div id="player"&gt;&lt;/div&gt;
  &lt;table&gt;
  ....
  &lt;tr &gt;
  &lt;td onclick="DoNav('kft0labfoeiv3f4kdvvm40imu4/video_ec9658f0c1855e2e2ac09ae284f5e6990dbf445d_1338304978.mp4');"&gt; Mycamera
  &lt;/td&gt;
  &lt;/tr&gt;
  ...
  &lt;/table&gt;
  
  &lt;script&gt;
  function DoNav(theUrl)
  {
  
  // only add the player if it doesn't yet exist
  if($('#myfileplayer').length == 0) {
      var mydiv = $("#player");
      var myvideo = $("&lt;video id='myfileplayer' src='"+ theUrl +
         "' width='280' height='200'  controls&gt;&lt;/video&gt;");
      mydiv.append(myvideo);
  } else {
     $('#myfileplayer').attr("src",theUrl); 
  }
  
  $("#myfileplayer").click(function(){
      $(this).play();
  });
  
  } 
  &lt;/script&gt;
  </code></pre>
  
  <p>I've read this post <a href="http://www.broken-links.com/2010/07/08/making-html5-video-work-on-android-phones/" rel="nofollow">Making html5 video work on android phones</a>. But I believe I've got that covered in my code above.  Anyone see what I can do to get this to work on Android?</p>