在省电模式下，位于HTML5视频上的元素在iOS上不可见

Question

我们将一些文本放置在HTML5 <video>上，作为循环视频背景。但是，如果电池省电模式处于激活状态，则无论z-index设置如何，绝对定位的元素在iOS的Safari上都不可见。示例：

<div class="example">
  <video playsinline muted loop autoplay>
    <source type="…" src="…" title="…">
  </video>
  <div class="text">
    Lorem ipsum dolor
  </div>
</div>

.example {
    position: relative;
}

video {
    width: 100%;
    height: auto;
}

.text {
    position: absolute;
    left: 2em;
    top: 2em;
    right: 2em;
}

这个HTML和CSS代码运行得很好，文本被覆盖在背景中播放的视频上。然而，一旦iOS设备上的省电模式被激活，文本就不再可见-并且也不能通过z-index显示。

这是不是出于某种原因设计的，所以iOS用户总是有机会实际播放视频(即没有任何障碍)，因为它不会自动在省电模式下播放？有什么方法可以防止这种行为吗？视频不能自动播放是很好的(因为这是在省电模式下应该发生的事情)-但是我们想要显示文本。

Answer 1

我认为你看到的行为是为了让用户能够按照你的建议在低功耗模式下播放视频。这可能是一个没有考虑到的用例--也就是说，允许通过视频看到一些东西，这样你就可以提出一个bug请求来检查这一点。

同时，作为一种解决办法，您可以检查您的视频是否已暂停，然后进行您想要的任何更改。请参见下面的示例监听器：

        yourVideo = document.getElementById('your_video_id');
        yourVideo.addEventListener('suspend', () => {
            // Add code here as required
            // e.g. hide the video and display
            // an image and your text instead.
        });

挂起事件信息在此处：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event