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 Android 4.1和kindlefire Android 4.0中使用Chrome进行测试

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版本）中工作。至少它在我的nexus 7上起作用

html5视频android：全屏保持宽高比

1 个答案: