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

发布于：2022-07-01 17:44:59  栏目：技术文档

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

}

},

}

相关推荐