vue中实现 【 Video视频进度条不能拖动,且能倍速播放 】,用vue-video-player插件,封装成组件的方法步骤

vue中实现 【 Video视频进度条不能拖动,且能倍速播放 】,用vue-video-player插件,封装成组件的方法步骤_第1张图片

一、安装 vue-video-player 插件

npm install vue-video-player -S

二、引入

1、全局引入,main.js

import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)

2、局部引入

import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
export default {
  components: {
    videoPlayer
  }
}

三、封装组件

1、创建组件videoPlay.vue,vue-video-player 插件本身带有倍速功能,只需在data() 中加上playbackRates 参数

data(){
  return {
    playerOptions: {
      playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
    }
  }
}



2、其中,实现禁止拖动进度条

A、在 .vjs-progress-control 样式名中加入 pointer-events: none 即可

// 禁止拖动进度条
/deep/ .vjs-progress-control{
  pointer-events: none !important;
}

B、函数中添加自定义样式 class名



四、页面调用

其中页面中需要 调用暂停视频播放 的地方,方法如下:



                    
                    

你可能感兴趣的:(VUE+ElmentUI,vue.js,音视频,javascript)