video 自定义视频播放控件的显示和隐藏

用户自定义视频控件的话，就得我们自己去控制控件的显示和隐藏状态，一起看看如何实现吧。

---

一、标签布局结构

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;
},

三、控件消失的过渡效果

参考文章