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

一、安装 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], // 可选的播放速度
    }
  }
}

<template>
    <div class='demo'>
        <video-player
            :style="'width:'+size.width+';height:'+size.height+';'"
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
            @play="onPlayerPlay($event)"
            @pause="onPlayerPause($event)"
            @playing="onPlayerPlaying($event)"
            @ended="onPlayerEnded($event)">
        </video-player>
    </div>
</template>
<script>
export default {
  props: {
    id: {
      type: Number,
      default: 0
    },
    size: {
      type: Object,
      default: () => {}
    },
    videoSrc: {
      type: String,
      default: ''
    },
    isFinish: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 类型
          src: this.videoSrc // url地址
        }],
        poster: '@/assets/images/material/video-bg.png', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: false, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      }
    }
  },
  methods: {
    // 监听播放
    onPlayerPlay (player) {
      this.$signalr.SendMsg(6301, this.id, '开始播放视频')
    },
    // 暂停视频
    onPlayerPause (player) {
      this.$signalr.SendMsg(6302, this.id, '暂停视频')
    },
    // 视频继续播放
    onPlayerPlaying (player) {
      this.$signalr.SendMsg(6303, this.id, '视频继续播放')
    },
    // 视频播放结束
    onPlayerEnded (player) {
      this.$signalr.SendMsg(6304, this.id, '视频播放结束')
    }
  }
}
</script>
<style lang="scss" scoped>
.demo{
    background: #000;
    .video-player{
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}
</style>

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

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

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

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

<script>
export default {
  props: {
    isFinish: {
      type: Boolean,
      default: false
    }
  },
  created () {
    setTimeout(() => {
      this.FinishBtn()
    }, 1000)
  },
  methods: {
    // 任务是否完成
    FinishBtn () {
      if (this.isFinish === true) { // 判断条件：true 未完成 不能拖动
        let control = document.querySelectorAll('.vjs-progress-control')
        control.forEach(item => {
          item.classList.add('pointer')
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
// 自定义禁止拖动进度条
/deep/ .pointer{
  pointer-events: none !important;
}
</style>

四、页面调用

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

<template>
  <div>
    <VideoPlayer ref="myvideo" :size="{width:'88%',height:'100%'}" :videoSrc="videosUrl"></VideoPlayer>
    <button @click="bottomclick">暂停</button>
  </div>
</template>
<script>
import VideoPlayer from '@/components/Video/index'
export default {
  components: { VideoPlayer },
  data(){
    return{
      videosUrl:require('@/assets/video.mp4')
    }
  },
  methods:{
    bottomclick () {
        this.$nextTick(() => {
          // 暂停播放 调用组件中的函数
          this.$refs.myvideo[0].onPlayerPause()
        })
    }
  }
}

五、其他（h5—video间接支持的视频格式）

1、支持.m3u8格式

(1) 安装插件 hls.js

cnpm install --save hls.js

(2) 代码部分

<template>
    <div class="videoPlayer" ref="videoPlayer">
      <video v-if="videoUrl.indexOf('.m3u8') !== -1" preload="auto" class="fl_video" ref="flVideo" @canplay="getVidDur" @click="onPlay" @playing="onWPlay"
        @timeupdate="onTimeupdate" @loadeddata="showFirstFrame" @waiting="onWaiting">
        <source :src="videoUrl" type='video/mp4'>
        <source :src="videoUrl" type='video/ogg'>
      </video>
    </div>
</template>
 
 
<script setup>
import { nextTick, onMounted, ref } from "vue";
import Hls from 'hls.js'
 
const flVideo = ref()
const videoUrl = ref()
onMounted(()=>{
  load()
})
// 初始化
const load = () => {
  state.videoUrl = 'https://cdn.23544.com/528aee907c8771ee805c5017e1f80102/8b247ec4f21e95ef9272e5285d2c1a27-sd.m3u8'
  nextTick(() => {
    if (videoUrl.value.indexOf('.m3u8') !== -1) {
      if (Hls.isSupported()) {
        var hls = new Hls() // 实例化 HIs 对象
        hls.loadSource(videoUrl.value)
        hls.attachMedia(flVideo.value)
        // hls.on(Hls.Events.MANIFEST_PARSED,() =>{ //加载成功
        //   flVideo.value.play()// 调用播放 API8
        // })
      }
    }
  })
}

2、支持.mpd格式

（1）安装 dashjs

cnpm i dashjs --save

（2）代码部分

<video id="videoPlay" data-dashjs-player autoplay :src="videoUrl"></video>
 
<script setup>
import dashjs from 'dashjs'
 
let videoUrl = ref('https://dash.akamaized.net/envivio/EnvivioDash3/manifest.mpd')
let player = dashjs.MediaPlayer().create()
player.initialize(document.querySelector("#videoPlay"), videoUrl.value, true)
</script>

      希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~