用户自定义视频控件的话，就得我们自己去控制控件的显示和隐藏状态，一起看看如何实现吧。
一、标签布局结构
1、在<video>标签中加入几个鼠标事件：
-
@dblclick="fullScreen()" // 双击
-
@mouseover="handleMouseOver()" // 鼠标移入视频区域
-
@mousemove.self="handleMouseMove()" // 鼠标在视频区域内移动
-
@mouseout="handleMouseOut()" // 鼠标移出视频区域
2、在控件标签的父盒子上加入鼠标事件：
- @mouseover="ctrlMouseOver" // 鼠标移入控件区域【注意阻止事件冒泡】
<div class="video-content" ref="videoContent">
<video
:controls="false"
width="100%"
height="100%"
@dblclick="fullScreen()"
@mouseover="handleMouseOver()"
@mousemove.self="handleMouseMove()"
@mouseout="handleMouseOut()"
@click="handlePlay"
>
您的浏览器不支持video
</video>
<!-- 视频控件过渡效果 -->
<transition name="ctrlFade">
<div class="ctrl-content" v-show="isShowOperate" @mouseover="ctrlMouseOver">
<div>播放进度条</div>
<div>切换播放</div>
<button @click="fullScreen">全屏</button>
</div>
</transition>
</div>
<script>
export default {
data(){
return{
timeout1: null, // 定时器
fullFlag: false, // 是否全屏（默认否）
isShowOperate: false // 是否显示播放控件（默认否）
}
}
}
</script>
<style lang="less" scoped>
.video-content {
position: relative;
.ctrl-content {
position: absolute; // 视频控件固定悬浮在视频底部
bottom: 0;
}
}
// 过渡进入的起始位置、离开的结束位置
.ctrlFade-enter-form, .ctrlFade-leave-to{
opacity: 0;
}
// 过渡进入的结束位置、离开的起始位置
.ctrlFade-enter-to, .ctrlFade-leave-from{
opacity: 1;
}
// 过渡的效果
.ctrlFade-enter-active, .ctrlFade-leave-active{
transition: opacity .5s linear 0s;
}
</style>
二、事件
1、双击切换全屏【这里有兼容不同的浏览器】
这里将整个视频（包括控件）一起全屏显示，这样在全屏的时候就还可以通过控件切换视频播放状态、调整音量等。
// 切换全屏
fullScreen() {
this.fullFlag = !this.fullFlag;
let element = this.$refs.videoContent;
if ( this.fullFlag ) { // 全屏
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
// IE11
element.msRequestFullscreen();
}
} else { // 退出全屏
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
},2、鼠标移入视频区域，显示视频控件
// 鼠标移入视频界面
handleMouseOver(){
this.isShowOperate = true;
},3、鼠标在视频区域移动，显示视频控件，2秒后隐藏
【这里用到定时器，每次开启前记得先关闭上一个定时器】
// 鼠标在视频界面内移动
handleMouseMove(){
this.isShowOperate = true;
clearTimeout(this.timeout1); // 使用定时器前先清除定时器
this.timeout1 = setTimeout(()=>{
this.isShowOperate = false;
},2000)
},4、鼠标移出视频区域，隐藏控件
// 鼠标移出视频界面
handleMouseOut(){
this.isShowOperate = false;
},5、鼠标移入视频控件区域，先关闭在视频区域移动产生的定时器（否则会导致控件显隐状态抖动），然后持续显示控件
// 鼠标在控件内
ctrlMouseOver(){
clearTimeout(this.timeout1);
this.isShowOperate = true;
},三、控件消失的过渡效果
参考文章
文章来源：https://www.toymoban.com/news/detail-504124.html
文章来源地址https://www.toymoban.com/news/detail-504124.html
到了这里，关于video 自定义视频播放控件的显示和隐藏的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
