CSS求助帖-video控制栏偏移

230 阅读1分钟

前言

五年前端开发,心态一直认为没有搞不定css,但今天确实有点泪奔了。这个css我搞不定...

10A48A1E.gif

需求

image.png

如上的截图中,由于需要在视频上进行点线面等画图操作,则需要将canvas画布设置为整个视频区域。

这就导致了问题:由于视频上覆盖了一层画布,导致video播放器本身无法在感知到鼠标事件,便失去了视频控制栏。

尝试方案

通过查看video内部元素可以了解到,video控制栏的dom在其内部

image.png

如何查看shadow-root,即内部元素
  1. chrome中点击设置,如下图

image.png

  1. 勾选上下图中的选项即可查看到video的内部元素

image.png

尝试思路

video控制栏整体下移,如下图所示的展示效果,控制栏展示在视频的下面而不是在视频的底部。

image.png

  1. video设置一个padding-bottom:40px,这样视频底部会空出一段距离;
  2. 给控制栏整体dom进行向下偏移transform:translateY(-40px);

结果失败

image.png 设置偏移之后也生效了,但不解的是!!!超过视频底部的所有内容都消失了!!!滚例如滚动条。 这里神奇的地方在于:查过了上级与本身,都没有设置overflow、visibility,并且偏移体本身的高度也没有被截取。

我把偏移体本身的dom样式贴出来,实在找不到原因了

image.png

末尾

css能解决这个需求,自然是最佳方案。 实在不行的话,就只有重写video控制栏了。

为啥超出的部分会被莫名其妙的隐藏?