HTML5 视频海报图像无法在 iPad 视网膜上全屏缩放

Posted 2023-05-07

【中文标题】HTML5 视频海报图像无法在 iPad 视网膜上全屏缩放

【英文标题】：HTML5 video poster image not scaling fullscreen on iPad retina

【发布时间】：2015-10-12 13:16:21

【问题描述】：

我在网站上有一个全屏视频。在 iPad 上，我想加载海报图像，所以它也是全屏的。我的标记和 css 在低分辨率 iPad Mini 上工作，但在 iPad Retina 上不能全屏显示。

html...

    <video autoplay poster="/images/styles/vid_home_screenshot.jpg" id="bgvid" loop>
        <source src="/video/Globe_vid_main_1280x720_v4.mp4" type="video/mp4" />
        <source src="/video/Globe_vid_main_1280x720_v4.webm" type="video/webm" />
        <source src="/video/Globe_vid_main_1280x720_v4.ogv" type="video/ogg" />     
    </video>

这是视频元素上的 css...

video position: absolute;
       min-width: 100%;
       min-height: 100%;
       width: auto;
       height: auto;
       z-index: -100;
       transition: 1s opacity;
       top: 0;
       left: 50%;
       transform: translate(-50%,0);
       -webkit-transform: translate(-50%,0);
       

【问题讨论】：

它似乎在 ios8 上正确显示，我正在测试它不能正常工作的 iPad 是 iOS7.1.1。

【参考方案1】：

position: fixed;
bottom: 0;
min-width: 100%;
min-height: 100%;
width:auto;
height:auto;
z-index: -100;
background-size: cover;
-webkit-background-size:cover; 
-moz-background-size:cover; 
-o-background-size:cover; 
background-size:cover;
left: 50%;
transform: translate(-50%,0);
-webkit-transform: translate(-50%,0);

【讨论】：

您能否解释一下这将如何帮助解决问题？