前端在视频全屏时展示自定义内容的解决方案

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第27天，点击查看活动详情

最近遇到一个关于视频全屏后操作的问题，现在来分享一下实现过程以及最终的方案。

功能分析

具体需求：在视频全屏的时候，增加一个截屏视频画面的自定义按钮，关于截屏的实现已经在上文中介绍：（前端实现视频一键抓拍功能）。

遇到的问题：全屏的时候视频占满屏幕，按钮会被遮挡。

最开始通过改变层级大小,来解决遮挡的问题，将按钮 z-index 设置为最高值，但是无效：

.screenShot {
  z-index: 2147483647
}

接下来开始重新分析其他的解决方案，由于当前全屏时点击的是视频自带的全屏按钮，全屏时 video 占满整个屏幕，如下图：

在无法改变层级的情况下，换一个思路，不再放大 video ，而去放大其父级 div，此时按钮被遮挡的问题得以解决。在这个过程中不能再去点击组件自带的全屏按钮。

功能实现

1. 隐藏全屏按钮

video::-webkit-media-controls-fullscreen-button {
  display: none;
}

运行后的效果：

2. 在 <video> 外自定义一个全屏按钮，手动触发全屏事件

  <div id="video">
    <video src="./test.mp4" controls="controls"></video>
    <div class="fullScreen" onclick="fullScreen()">[点击全屏/取消全屏]</div>
  </div>

  function fullScreen() {
    if (!isfull) {
    document.getElementById('video').requestFullscreen();
      isfull = !isfull;
    } else {
      document.exitFullscreen();
      isfull = !isfull;
    }
  }

3. 样式配置

运行后可以看到全屏前后按钮都没有被覆盖：

以上，问题解决。

注意事项

隐藏全屏按钮，防止点击之后出现按钮被覆盖的情况

截屏的时候，截取的应该是video标签区域的图像，选择其父级div 可能会导致图片变形或者截取多余区域