覆盖 iOS 上 Html5 视频元素中的阴影内容（用户代理）样式

Question

我正在使用 playsinline 属性在页面上显示一个元素，以允许 iOS 设备播放视频而不将其设置为全屏。效果很好，但我注意到，使用该属性，视频元素包含一个带有“媒体控件容器”类的 div 的“阴影内容（用户代理）”元素，这让我认为它与视频控件有关酒吧 o 相似。该 div 通常不会打扰我，但我尝试在视频元素的容器上添加一个点击侦听器，我注意到如果我点击视频元素表面，则不会触发该事件，这在桌面上运行良好浏览器代替。

我已经尝试在视频元素上设置 css 属性“poiter-events:none”，但这似乎还不够，因为我之前提到的“media-controls-container”阻止了事件传播到下层容器。我发现在“media-controls-container”上设置相同的属性可以解决我的问题，但由于它是“Shadow Content (User Agent)”的一部分，我不知道如何使用 css 设置属性.

我还尝试使用 javascript 检查视频元素，我注意到元素上的“video.shadowRoot”属性设置为 null，据我所知，这意味着阴影内容已关闭且无法访问。

所以基本上我无法更改该阴影内容的 css 属性，并且我不知道如何让视频元素将点击事件传播到父容器。

有谁知道如何做到这一点？另请注意，视频元素相对于其容器使用“位置：绝对”定位（我不知道了解它是否有用）。

谢谢您的帮助。