iOS Safari HTML5视频覆盖所有内容

Question

我正在编写一个使用html5视频元素的应用程序。
在iOS Safari中，使用playsinline确保视频作为内联元素进行定位等操作时，它按预期工作，但是视频出现在所有内容之上。 z-index和定位技术似乎无法解决此问题。在任何情况下我都无法让任何内容出现在视频之上。

除了iOS Safari之外的所有浏览器似乎都可以正常工作。

值得一提的是，视频src将解析为本地blob url。例如：blob:file:///2afb998a-84e3-4819-8243-5da7d7da3cb6 参考信息：这是一个Angular应用程序，我目前正在测试iOS 11.1.2上的Mobile Safari。

<video
   id="video"
   [src]="src"
   autoplay="autoplay"
   muted="muted"
   webkit-playsinline
   playsinline>
</video>

- Matthew Trout

---

没有 HTML 和 CSS 很难说。 - Ploppy

Answer 1

我也遇到了同样的问题。从包含video标签的父级div中移除overflow样式可以解决这个问题。请参考Video and z-index inside scaled element: some divs disappear获取更多信息。

- Alexander Ushakov