vcIsPlay: false, //是否播放 opcityVal: { opacity: '1' }, currentTimeVal: 0, // 当前时间 vcCurrentTime: '00:00:00', //当前时间格式化 vcProgress: 0, //进度条的绑定时间 durationProgress: 0, //当前视频的总时长 speedTime: '1x', //倍速 voiceProgress: 0 //声音
暂停和播放：
// 播放和暂停视频 controlVideo() { let videoObj = this.$refs.videoCon this.durationProgress = videoObj[0].duration //总时间 if (this.vcIsPlay) { videoObj[0].pause() } else { videoObj[0].play() } this.vcIsPlay = !this.vcIsPlay this.opcityVal.opacity = this.opcityVal.opacity == '1' ? '0' : '1' },
直接调用提供的两个方法即可，然后使用vue的style绑定控制暂停按钮的显隐即可，这里的进度条，我换了种玩法，同样是element的滑动条组件，只不过max值我换成了总时长，单位秒，原因请耐心看下文，嘿嘿！
进度条部分：
// 获取时间 videoTimeUpdate() { let videoObj = this.$refs.videoCon let currTime = videoObj[0].currentTime //当前时间 this.vcProgress = currTime //赋值给进度条 this.vcCurrentTime = this.getFormatVideoTime(currTime) console.log(this.vcCurrentTime) //"00:00:27" }, //格式化时间 getFormatVideoTime(time) { let curtime = time let h = parseInt(curtime / 3600) let m = parseInt((curtime % 3600) / 60) let s = parseInt(curtime % 60) h = h < 10 ? '0' + h : h m = m < 10 ? '0' + m : m s = s < 10 ? '0' + s : s return h + ':' + m + ':' + s },
这里难点是，我如何进行拖动进度条，来进行控制呢？
别慌，看 代码：
@change="getNewTime" //element 的滑动组件有个chang事件 getNewTime(val) { let videoObj = this.$refs.videoCon console.log(val) videoObj[0].currentTime = val },
通过change进度条，然后重新赋值给当前时间就搞定了，可以说是炒鸡舒服了
倍速部分：
// 获取当前播放的速度 handleCommand(val) { let videoObj = this.$refs.videoCon switch (val) { case '1': videoObj[0].playbackRate = 0.5 this.speedTime = '0.5x' break case '2': videoObj[0].playbackRate = 1 this.speedTime = '1x' break case '3': videoObj[0].playbackRate = 1.5 this.speedTime = '1.5x' break case '4': videoObj[0].playbackRate = 2 this.speedTime = '2x' break case '5': videoObj[0].playbackRate = 3 this.speedTime = '3x' break default: videoObj[0].playbackRate = 1 this.speedTime = '1x' break } },
看图：
这里使用的是element的下拉组件，同样，Video的playbackRate可以直接赋值，控制播放速度
声音部分：
// 设置声音 getNewVoice(val) { let videoObj = this.$refs.videoCon let newVc = val / 100 //h5规定,volume的值必须再0-1之间,比如0.5就是50%的音量,但是进度条的值为100,因此这里做个除法 videoObj[0].volume = newVc //赋值 },
我也是使用的滑组件，max值保持默认的100，然后滑动改变的时候，把默认值除100，比如当前滑块的新值是50，除100后得到的就是【0-1】范围里的合法值，Video提供的volume值如果不在 0-1之间，就会报错
最后是全屏部分：
// 全屏播放 getFullSceen() { let videoObj = this.$refs.videoCon videoObj[0].webkitRequestFullScreen() },
但是我看到网上还有一种方法是模拟按下f11的全部，如果有兴趣也可以了解下！
总结
因为之前没有很仔细的搞过video，所以对它很多的内置属性和方法不了解，没经验就害怕，很慌很慌，这就跟谈恋爱似的，哈哈哈，再组长的支持和鼓励下，我大胆的尝试了，成功后，这次经验给了我很大信心，感觉以后写其他没做过的功能，都不会慌了，毕竟难的部分写elementUi的大佬们都给写好了，可以说是站在巨人的肩膀上，哈哈哈！膜拜大佬，以后还得多多努力了。