iOS Mobile Safari - HTML5 <video> 覆盖一切

Question

我知道 6 年前就有过类似的问题，但没有答案，我目前正在处理同样的问题。

问题：我的 Angular/Ionic 应用程序中的

<video>

标签覆盖了我的图像和 iOS Mobile Safari 中的两个按钮 - 无论我做什么！

它适用于我测试过的所有其他浏览器，但不适用于 iOS 移动 safari。

html

：

<ion-row style="height: 87vh; background: black">
        <ion-col style="height: 100%" size="12">
          <div class="outside_home">
            <video playsinline [muted]="true" loop id="video" height="100%" autoplay>
              <source src="{{homeInfo().videoUrl}}" type="video/mp4">
              <source src="{{homeInfo().videoUrl}}" type="video/webm">
              <source src="{{homeInfo().videoUrl}}" type="video/mov">
            </video>
            <div class="inside">
              <ion-grid>
                <ion-row class="ion-text-center ion-justify-content-center">
                  <ion-col size-xs="12" size-sm="10" size-md="8" size-lg="7" size-xl="6">
                    <picture>
                      <source type="image/webp">
                      <img [ngSrc]="homeInfo().homePageTitle" priority="true" alt="" style="min-height: 80px; display: block"
                           width="" height="">
                    </picture>
                  </ion-col>
                </ion-row>
                <ion-row class="ion-text-center">
                  <ion-col size-sm="6" class="ion-text-sm-end" size-xs="12">
                    <div style="padding-right: 3%; padding-left: 3%">
                      <ion-button fill="outline" class="video_text" (click)="navigateToPage('connect')">
                        Connect
                      </ion-button>
                    </div>
                  </ion-col>
                  <ion-col size-sm="6" class="ion-text-sm-start" size-xs="12">
                    <div style="padding-left: 3%; padding-right: 3%">
                      <ion-button fill="outline" class="video_text" (click)="navigateToPage('directions')">
                        Join in Person
                      </ion-button>
                    </div>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </div>
          </div>
        </ion-col>
      </ion-row>

视频本身是一个

.mov

文件。

这是我的CSS：

div.outside_home {
  display: flex;
  position: absolute;
  width: 100%;
  min-height: 87vh;
  vertical-align: middle;
  justify-content: center;
}

div.inside {
  width: 100%; /* Can be in percentage also. */
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

我真的不知道还能做什么 - 我尝试添加

overflow: visible

、

z-index

定位，但什么也没有。

文本后面的视频正在播放 - 我刚刚拍了一张没有人在屏幕上的照片 - 但你可以看到图像和它应该是什么的文本。正常情况下就是这个样子。

在 iOS 移动 Safari 上，

img

或

buttons

根本不显示 - 它会显示 短暂的一秒，然后消失。奇怪的是，即使屏幕上的按钮不可见，您仍然可以单击它们？我不知道。如果有人能提供帮助那就太好了。

我感谢所有帮助！

Answer 1

为了确保 iOS Mobile Safari 上 Angular/Ionic 应用程序中的元素上方的按钮可见且可单击：

CSS：

div.outside_home {
    display: flex;
    position: absolute;
    width: 100%;
    min-height: 87vh;
    vertical-align: middle;
    justify-content: center;
    z-index: 1;   //Changes added

    video {   //Changes added
        position: absolute;
        top: 0;
        left: 0;
        min-width: 100%;
        min-height: 100%;
        z-index:-10;
      }
  }

  div.inside {
    width: 100%; 
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }

HTML：

 <ion-row style="height: 87vh; background: black">
      <ion-col style="height: 100%" size="12">
        <div class="outside_home" >
          <video playsinline [muted]="true" loop id="video" height="100%" autoplay>
            <source src="https://amazonaws.s3.SampleVideoCheck.mp4" type="video/mp4">
            <source src="https://amazonaws.s3.SampleVideoCheck.mp4" type="video/webm">
            <source src="https://amazonaws.s3.SampleVideoCheck.mp4" type="video/mov">
          </video>
          <div class="inside">
            <ion-grid>
              <ion-row class="ion-text-center ion-justify-content-center">
                <ion-col size-xs="12" size-sm="10" size-md="8" size-lg="7" size-xl="6">
                  <picture>
                    <source type="image/webp">
                    <img src="https://www.gstatic.com/webp/gallery/1.sm.jpg" priority="true" alt="" style="min-height: 80px; display: block"
                         width="" height="">
                  </picture>
                </ion-col>
              </ion-row>
              <ion-row class="ion-text-center">
                <ion-col size-sm="6" class="ion-text-sm-end" size-xs="12">
                  <div style="padding-right: 3%; padding-left: 3%">
                    <ion-button fill="outline" class="video_text" (click)="navigateToPage('connect')">
                      Connect
                    </ion-button>
                  </div>
                </ion-col>
                <ion-col size-sm="6" class="ion-text-sm-start" size-xs="12">
                  <div style="padding-left: 3%; padding-right: 3%">
                    <ion-button fill="outline" class="video_text" (click)="navigateToPage('directions')">
                      Join in Person
                    </ion-button>
                  </div>
                </ion-col>
              </ion-row>
            </ion-grid>
          </div>
        </div>
      </ion-col>
    </ion-row>

此 CSS 调整可确保视频位于其他内容后面，从而使按钮可见且可点击。

希望这有帮助！如果您需要更多帮助，请随时询问。