iOS 上的视频标签无法正常工作，视频隐藏了其他元素答案

【问题标题】：Video tag on iOS is not working properly, video hides other elementsiOS 上的视频标签无法正常工作，视频隐藏了其他元素
【发布时间】：2020-06-25 14:44:29
【问题描述】：

Web 开发新手。我正在尝试制作带有视频背景和视频上一些文本覆盖的横幅。它在 Safari(macOS)、Chrome(macOS) 和 Chrome(Android) 上运行良好，但在使用 Safari(iPhone) 和 Chrome(iPhone) 时视频会隐藏所有文本* 在 iPad 上运行良好 *强>。有人知道我的代码有什么问题吗？谢谢

<div class="container-fluid landing-banner">
   <div class="row banner-video-container">
       <video autoplay muted loop id="banner-video">
         <source src="https://mywebsite.com/video.mp4" type="video/mp4">
       </video>
       <h1>H1 text here</h1>
       <h2>H2 text here</h2>
       <a href="https://mywebsite.com/getstarted"><button class="btn-main">Get Started</button></a>
   </div>
</div>

div.landing-banner {
    position: relative;
    height: 600px;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

div.banner-video-container {
    height: 600px;
    width: auto;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}

#banner-video {
    position: absolute;
    object-fit: cover;
}

.banner-video-container h1, .banner-video-container h2, .banner-video-container a {
    z-index: 1;
}

【问题讨论】：

标签： html css ios html5-video web-deployment

【解决方案1】：

我认为您希望您的视频在网页中“内联”播放。

尝试添加playsinline属性：

<div class="container-fluid landing-banner">
   <div class="row banner-video-container">
       <video autoplay muted loop id="banner-video" playsinline>
         <source src="https://mywebsite.com/video.mp4" type="video/mp4">
       </video>
       <h1>H1 text here</h1>
       <h2>H2 text here</h2>
       <a href="https://mywebsite.com/getstarted"><button class="btn-main">Get Started</button></a>
   </div>
</div>

这应该使视频内嵌在页面中。有关视频的 iOS HTML5 的更多信息：

https://webkit.org/blog/6784/new-video-policies-for-ios/

【讨论】：