html5视频android：全屏保持纵横比

Posted 2023-02-25

【中文标题】html5视频android：全屏保持纵横比

【英文标题】：html5 video android: preserve aspect ratio in full screen

【发布时间】：2012-12-12 02:43:38

【问题描述】：

我正在使用视频标签在 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 测试

【参考方案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);
      

你在某些设备（或安卓版本）上不工作。至少它适用于我的 nexus 7