小编Sim*_*oni的帖子

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

我正在使用 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 属性,并且我不知道如何让视频元素将点击事件传播到父容器。

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

谢谢您的帮助。

html html5-video ios shadow-dom pointer-events

5
推荐指数
0
解决办法
727
查看次数

标签 统计

html ×1

html5-video ×1

ios ×1

pointer-events ×1

shadow-dom ×1