如何在video全屏后显示其他元素?

666 阅读1分钟

JavaScript中提供了一个可以让普通元素全屏的api:

document.getElementById("div").requestFullscreen();

也就是说,我们只需要让 video 标签外层的壳子全屏就行了:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #wrapper{
      height: 200px;
      width: 200px;
      background: black;
    }
    #btn{
      height: 100px;
      width: 100px;
      background: #188eee;
    }
    
    #wrapper div{
      height: 100px;
      width: 100px;
      background: yellow;
    }
  </style>
</head>
<body>
<div id="wrapper">
  <video></video>
  <!-- content 就跟着展示出来了 -->
  <div>content</div>
</div>
<div id="btn"></div>
<script>
  document.getElementById("btn").onclick = () => {
    document.getElementById("wrapper").requestFullscreen()
  };
</script>
</body>
</html>