怎样在video全屏后显示其他元素?

我在网上找到的答案都是 z-index:2147483647 ,但是实际测试发现, 添加z-index还是无效 (chrome版本 94.0.4606.81)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.show{
width:50vw; height:50vh; background-color:red;
position:absolute; z-index:2147483647;
}
</style>
</head>
<body>
<video src='https://www.runoob.com/try/demo_source/movie.mp4' controls></video>
<div class='show'></div>
</body>
</html>

但是我看 其他网站(如b站) 可以实现自定义播放条, 所以要怎样才能在video全屏后显示其他元素?

阅读 6.9k
1 个回答

你没发现你说的这些网站,没有一个用的是自带的 Controls 么……都是自定义的。

默认的 Controls 全屏时只全屏了 video 这一个元素,所以你写的在 video 外层的那些元素就都不显示了;而自定义时你要全屏的是容器元素。

大概这样:

<div class="container">
  <div class="player">
    <video></video>
  </div>
  <div class="controller">
  </div>
</div>

你自定义的全屏按钮要控制 container 全屏,而不是单单只控制 video 全屏。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题