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

2023-09-01 03:11| 来源: 网络整理| 查看: 265

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.以下是具体的代码

遮罩 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 = '' 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 } } } .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; } }

如有疑问，请下方留言

【本文地址】

公司简介

联系我们