vue和uniapp禁止拖拽视频进度条

vue和uniapp禁止拖拽视频进度条

一、vue视频插件video-player点击控制条也会触发暂停事件弹出蒙层

项目开发中遇到问题：触发暂停事件弹出蒙层，问题是点击进度条也会触发暂停事件弹出蒙层

基本代码：

<video-player

        id="video"

        class="video video-player vjs-custom-skin"

        ref="videoPlayer"

        :options="playerOptions"

        @play="onPlayerPlay($event)"

        @pause="onPlayerPause($event, 'm')"

        @ready="playerReadied"

        v-on:click.stop="doThis"

      ></video-player>

main.js

//视频控件

import VideoPlayer from 'vue-video-player'

require('video.js/dist/video-js.css')

require('vue-video-player/src/custom-theme.css')

import 'videojs-contrib-hls.js/src/videojs.hlsjs'

const hls = require('videojs-contrib-hls')

Vue.use(hls)

Vue.use(VideoPlayer)

引入

import "video.js/dist/video-js.css";

解决方法一：直接禁用进度条

methods：{

 //播放

    onPlayerPlay(player) {

document.querySelector(".vjs-progress-control").style.pointerEvents ="none";

    },

   }

解决方法二：利用定时器

data(){

return{

timer: 0,

}

}

//播放

    onPlayerPlay(player) {

      if (this.timer) {

        clearTimeout(this.timer);

      }

    },

    //暂停

    onPlayerPause(player) {

      this.timer = setTimeout(() => {

       //进行你的操作

      }, 500);

    },

二、uniapp禁止视频拖拽进度条

基本代码：

<video id="myVideo" src="视频地址"  controls @play="onPlayerPlay"></video>

解决方法

data() {

return {

is_fast_switch: 0,

}

},

methods: {

//如果接口关闭快进按钮，直接禁用进度条

onPlayerPlay(player) {

  if (this.is_fast_switch == 0) {

document.querySelector(".uni-video-progress-container").style.pointerEvents ="none";

  }

},

}