vue-video监听touch事件

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

vue-video监听touch事件，兼容移动端

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();

以上是 vue-video监听touch事件 的全部内容， 来源链接： utcz.com/z/378948.html

回到顶部