背景 <video> 未在 IOS 设备上显示答案

【问题标题】：background <video> is not showing on IOS devices背景 <video> 未在 IOS 设备上显示
【发布时间】：2023-02-20 18:10:52
【问题描述】：

尝试制作视频作为网站主页的背景。注意到在我的本地环境（windows）中，视频总是没有问题，但是在 BrowserStack 上测试本地环境时，在任何和所有 IOS 设备上出现空白的白色背景，而 android 和 windows 都很好。这是我的视频标签的格式：

.categoryBtns {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
        /* grid-template-columns: repeat(4, minmax(175px, 1fr)); */
        grid-column-gap: 2rem;
        margin: 10% auto auto auto;
        justify-content: center;
    }

    video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        background-color: white;
    }
    
    .circle-button {
        position: relative;
        z-index: 10;
        border-radius: 100%;
        background: #ffffffc2;
        color: #50a249;
        font-weight: 700;
        text-transform: uppercase;
        font-family: 'Quicksand';
        font-size: 22px;
        border: none;
        box-shadow: 0 0 20px #cacaca, 
        inset 0 0 20px #9b9b9b;
        text-align: center;
        height: 190px;
        width: 190px!important;
        display: flex;
        justify-content: center;
        align-items: center;
        place-self: center;
    }
    
    .circle-button:hover, .circle-button:active, .circle-button:focus {
        color: #143156;
        font-size: 24px;
        border: 5px solid #8de086;
        box-shadow: 0 0 50px #50a249, 
        inset 0 0 100px #50a249;
        background: rgba(255, 255, 255, 0.849);
    }

    .circle-button img {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 60%;
        padding: 2rem;
        z-index: -1;
    }

<section class="homepage-background">
    <video src="https://store-cmzuk2x1pt.mybigcommerce.com/content/background%20video%20ingredi.mp4" autoplay loop muted playsinline="true" disablePictureInPicture="true" type="video/mp4"></video>
    <div class="categoryBtns">
        <a href="https://ingredi.com/bakery/" class="button circle-button"><img src="https://cdn11.bigcommerce.com/s-cmzuk2x1pt/images/stencil/original/image-manager/bakery-white-175x175.png" />Bakery</a>
        <a href="https://ingredi.com/beverage/" class="button circle-button"><img src="https://cdn11.bigcommerce.com/s-cmzuk2x1pt/images/stencil/original/image-manager/beverage-white-175x175.png" />Beverage</a>
        <a href="https://ingredi.com/wine/" class="button circle-button"><img src="https://cdn11.bigcommerce.com/s-cmzuk2x1pt/images/stencil/original/image-manager/wine-white-175x175.png" />Wine</a>
        <a href="https://ingredi.com/beer/" class="button circle-button"><img src="https://cdn11.bigcommerce.com/s-cmzuk2x1pt/images/stencil/original/image-manager/beer-white-175x175.png" />Brewery</a>
        <a href="https://ingredi.com/flavors-fragrances/" class="button circle-button"><img src="https://cdn11.bigcommerce.com/s-cmzuk2x1pt/images/stencil/original/image-manager/flavorsfragrances-white-175x175.png" />Fragrances <br>& Flavors</a>
    </div>
</section>

我的视频格式有问题吗？我在我的标签中遗漏了什么吗？

我没有在这个特定页面上添加我正在使用的所有代码，只有相关信息，所以如果有未显示的类列出的 css 等，我深表歉意。

【问题讨论】：

标签： html css ios video background

【解决方案1】：

您是否尝试过使用其他编解码器转换您的 MP4 文件？

iPhone 只能识别以 H.264、MPEG 或 HEVC 压缩的 .mp4 扩展名的文件（iPhone 7/7 Plus 或更高版本）

也许这篇文章可以帮助： https://www.winxdvd.com/play-video/play-mp4-iphone.htm

【讨论】：