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";
}
},
}
