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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM