无法滚动视频元素

问题描述 投票:0回答:1

仅在移动设备上无法滚动视频元素。当我在视频上将指针事件设置为无时,滚动效果很好。但是视频顶部的视频播放/暂停控制(点击屏幕)不起作用。希望滚动和视频点击控件都能按要求工作。

css video scroll
1个回答
0
投票

一种方法是放置一个透明元素覆盖视频,并禁用其指针事件。

滚动例如在 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>

© www.soinside.com 2019 - 2024. All rights reserved.