视频全屏播放不显示遮罩？

video全屏播放不能显示遮罩？

需求是这样的，视频播放完成后会弹出一个遮罩，当视频不是全屏的时候，遮罩可以正常显示，但是当视频是全屏的时候，遮罩不会显示出来，我当时在网上查了很多资料，都没能给出一个合理的方案，于是我就从video插件开始入手，于是我找到了解决方案，就是video.js。

为什么我们不能通过z-index实现呢？

video在全屏播放时候设置z-index不管用，因为全屏播放当前视频的显示会比任何元素的显示层级高，并且根本就不能在样式中找到z-index，设置z-index就更不管用了。所以不管遮罩设置是否为多大，依然撼动不了全屏的层级。

下面说说我实现的过程吧

1.npm install video.js

2.在main中添加
import Video from ‘video.js’
import ‘video.js/dist/video-js.css’
Vue.prototype.$video = Video

3.以下是具体的代码

<template>
	<div id="video" class="video">
		<video
		  id="media"
		  class="video-js video-animation"
		  ref="video"
		  @dblclick="clickVideo">
		  <source
		    :src="视频地址"
		    type="video/mp4"
		    id="videoMP4">
		</video>
		<div v-if="state" class="video-mask">
	      遮罩
	    </div>
    </div>
</template>
<script>
export default {
    name: 'Video',
    data () {
      return {
     	state: false,
        isFull: false
      }
    },
	mounted () {
	this.$refs.video['disablePictureInPicture'] = true
    let schedule
    // 监听视频播放完毕，弹出遮罩
    if (!this.state) {
      document.getElementById('media').loop = false
      document.getElementById('media').addEventListener('ended', () => {
        this.state = true
      }, false)
    }
      this.initVideo()
    },
    methods: {
	    initVideo () {
	      // 初始化视频方法
	      this.$video('media', {
	        // 显示工具栏
	        controls: true,
	        // 自动播放属性
	        autoplay: 'autoplay',
	        // 自动播放
	        preload: 'auto'
	      })
	      // 工具栏添加按钮
	      var newbtn = document.createElement('div')
	      newbtn.innerHTML = '<button class="vjs-control" id="fullscreen"></button>'
	      var controlBar = document.getElementsByClassName('vjs-control-bar')[0]
	      let insertBeforeNode = document.getElementsByClassName('vjs-fullscreen-control')[0]
	      controlBar.insertBefore(newbtn, insertBeforeNode)
	      document.getElementsByClassName('vjs-control-bar').bottom = '0px'
	      document.getElementById('fullscreen').onclick = () => {
	        this.clickVideo()
	      }
	      // esc事件，恢复video尺寸
	      document.onkeydown = (e) => {
	        // 事件对象兼容
	        // eslint-disable-next-line no-caller
	        let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
	        if (e1 && e1.keyCode === 27) {
	          this.$refs.video.style.height = 'calc(100vh - 76px)'
	        }
	      }
	    },
	    // 切换最大化最小化
	    clickVideo () {
	      if (!this.isFull) {
	        this.$refs.video.style.height = 'calc(100vh)'
	        document.getElementById('fullscreen').style.backgroundImage = "这个在控制台选中当前自定义最大化/恢复图片的路由，记住千万不能是绝对路由，一定是这种格式的：url(data:image/png;base64,***********************ggg==)"
	        const isFullScreen = this.getreqfullscreen()
	        isFullScreen.call(document.getElementById('video'))
	      } else {
	        document.getElementById('fullscreen').style.backgroundImage = "这个在控制台选中当前自定义最大化/恢复图片的路由，记住千万不能是绝对路由，一定是这种格式的：url(data:image/png;base64,***********************ggg==)"
	        this.$refs.video.style.height = 'calc(100vh - 76px)'
	        this.exitFullscreen()
	      }
	    },
	    // 退出全屏
	    exitFullscreen () {
	      if (document.exitFullscreen) {
	        document.exitFullscreen()
	      } else if (document.msExitFullscreen) {
	        document.msExitFullscreen()
	      } else if (document.mozCancelFullScreen) {
	        document.mozCancelFullScreen()
	      } else if (document.oRequestFullscreen) {
	        document.oCancelFullScreen()
	      } else if (document.webkitExitFullscreen) {
	        document.webkitExitFullscreen()
	      } else {
	        var docHtml = document.documentElement
	        var docBody = document.body
	        var videobox = document.getElementById('videobox')
	        docHtml.style.cssText = ''
	        docBody.style.cssText = ''
	        videobox.style.cssText = ''
	        document.IsFullScreen = false
	      }
	      this.isFull = false
	    },
	    // 进入全屏
	    getreqfullscreen (root) {
	      // eslint-disable-next-line no-redeclare
	      var root = document.documentElement
	      this.isFull = true
	      return root.requestFullscreen || root.webkitRequestFullscreen || root.mozRequestFullScreen || root.msRequestFullscreen
	    }
	 }
  }
</script>
<style lang="scss" scoped>
.video{
  color:rgba(59,86,129,1);
  .video-animation{
    width:100%;
    height: calc(100vh - 76px);
  }
  .video-mask{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    background-color:rgba(255,255,255,0.8);
  }
}
/deep/.el-button{
  border: 0px;
}
/deep/.el-button:hover {
  background: #ffffff;
}
::v-deep{
  .video-js .vjs-fullscreen-control,
  .video-js .vjs-picture-in-picture-control{
    display: none;
  }
  .vjs-has-started .vjs-control-bar{
    position: fixed;
  }
  .video-js #fullscreen{
    cursor: pointer;
    width: 50px;
    background-image: url("图片地址");
    background-repeat:no-repeat;
    background-position:center;
  }
  .video-js div .videoSize:before{
    content: "\F108";
    font-size: 25px;
  }
}
</style>

如有疑问，请下方留言