html5視頻android：全屏保存長寬比

Question

我正在使用視頻標籤在iPad和Android設備上同時傳輸hls。
我在Android上遇到了一個問題，在進入全屏模式後，視頻延伸到填充設備的屏幕，並打破了原始的寬高比。

它旋轉後雖然正確的方式。

下面是我使用的示例代碼，雖然它是hls，但我相信普通視頻文件也存在同樣的問題。

<video id="main-video" src="my_hls_link.m3u8" style="width:100%; height:270px;"> 
</video> 

和Javascript：

var player = document.getElementById("main-video"); 
player.addEventListener('webkitbeginfullscreen', function(){ 
      this.load(); 
      this.play(); 
      }, false); 

中的Nexus 7使用Chrome的Android 4.1測試和kindlefire的Android 4.0

Answer 1

我可以做一個變通與此：

//fixing the bug in android that stretch video on load 
     function fix_stretch_video(){ 
     var check_interval = setInterval(function(){ 
      $('.pl-loading-btn').css('display', 'block'); 
      if (player.videoWidth != 0) { 
      $('.pl-loading-btn').css('display', 'none'); 
      $('video').css('width', '99%'); 
      $('video').css('width', '100%'); 
      clearInterval(check_interval); 
      } 
     },100); 
     } 

不工作在某些設備（或Android版本）你。至少它在我的聯繫上工作7