HTML 5視頻無法在Ipad和iPad佈局上有黑色部分

我被困在HTML 5項目中，該視頻在Chrome和Safari PC瀏覽器中運行，但不在iPad上運行。要求僅在肖像模式下進行此項工作，並在點擊/點擊視頻時播放視頻。HTML 5視頻無法在Ipad和iPad佈局上有黑色部分

<!doctype html> 
<!--[if lt IE e 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]--> 
<!--[if IE 7]>   <html class="no-js lt-ie9 lt-ie8" lang="en">   <![endif]--> 
<!--[if IE 8]>   <html class="no-js lt-ie9" lang="en">    <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js" lang="en">      <!--<![endif]--> 
    <head> 
     <meta charset="utf-8"> 
     <title>Page 1</title> 
     <meta name="description" content=""> 
     <meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" /> 
     <style> 
      #container{ 
       width:768px; 
       margin:150px auto; 
       position: relative; 
      } 
      #container video { 
       position:relative;  
       z-index:0; 
      } 
      .overlay { 
       position:absolute; 
       top:170px; 
       left:380px; 
       z-index:1; 
      } 
     </style> 

     <script> 
      function play(){ 
       var video = document.getElementById('video'); 
       video.addEventListener('click',function(){ 
        video.play(); 
       },false); 
      } 
    </script> 

     <script> 
      $(document).ready(function() { 
       function reorient(e) { 
        var portrait = (window.orientation % 180 == 0); 
        $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" :  ""); 
       } 
       window.onorientationchange = reorient; 
       window.setTimeout(reorient, 0); 
      }); 
     </script> 
    </head> 
    <body> 
     <div id="container"> 
      <video id="video" width="770" height="882" onclick="play();"> 
       <source src="video/Motionv4-1.m4v" /> 
      </video> 
      <div class="overlay"> 
       <div style="color:#356AFA; text-align:center; font-weight:bold; font-size:45px; line-height:60px; font-family:arial"> 
        Tap the <br /> DoughBoy<br />to Join<br /> JavaWorld<br /> Wi-Fi! 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

來源

2012-05-05 jalf