仅在移动设备上无法滚动视频元素。当我在视频上将指针事件设置为无时,滚动效果很好。但是视频顶部的视频播放/暂停控制(点击屏幕)不起作用。希望滚动和视频点击控件都能按要求工作。
一种方法是放置一个透明元素覆盖视频,并禁用其指针事件。
滚动例如在 IOS 上仍然可以工作,并且当指针事件将穿过透明元素时,视频控件将被启用。
此代码片段将视频包装在容器 div 中,透明部分是 after 伪元素。
身体被赋予了额外的高度,以便可以演示滚动。
<style>
body {
height: 200vh;
}
.over {
position: relative;
width: fit-content;
height: fit-content;
}
.over::after {
content: '';
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background-color: rgba(0, 0, 0, 0);
pointer-events: none;
}
video {
height: 100vh;
/* for demo purposes */
]
</style>
<body>
<div class="over">
<video src="your video source" controls></video>
</div>
</body>