vue-video是基于 Vue 的简洁 HTML5 视频播放器组件,但是并没有监听touch事件,也就是说在移动端按键无效。
本文讲述如何改写其vue组件,使其兼容移动端。只需要在其原有的mouse事件上,再额外添加touch事件即可。
html部分
<div class="__cov-video-container" @mouseenter="mouseEnterVideo" @mouseleave="mouseLeaveVideo" @touchstart.native="toggleContrlShow"> <div class="__cov-contrl-video-slider" @click="slideClick" @mousedown="videoMove" @touchstart="videoMove"> <div class="__cov-contrl-vol-slider" @click="volSlideClick" @mousedown="volMove" @touchstart="videoMove">
js部分
mounted () { //以前vedio版本钩子函数ready被替换成了mounted,此次需更改 this.$nextTick(function () { // 代码保证 this.$el 在 document 中 this.$video = this.$el.getElementsByTagName('video')[0] this.init() if (this.options.autoplay) { this.play() } //添加监听touch事件 document.body.addEventListener('mousemove', this.mouseMoveAction, false) document.body.addEventListener('touchmove', this.mouseMoveAction, false) document.body.addEventListener('mouseup', this.mouseUpAction, false) document.body.addEventListener('touchend', this.mouseUpAction, false) }) }, beforeDestroy () { document.body.removeEventListener('mousemove', this.mouseMoveAction) document.body.removeEventListener('touchmove', this.mouseMoveAction) document.body.removeEventListener('mouseup', this.mouseUpAction) document.body.removeEventListener('touchend', this.mouseUpAction) },
这样就可以实现了对移动端的兼容。
如果需要在父组件调用该组件,推荐添加pause方法
pause(){ //添加暂停
this.$video.pause()
},
通过ref在父组件,调用子组件的方法。如
this.$refs.myV[0].pause();