vue-video-player视频播放器使用总结

一、安装

//5.0.2
npm install vue-video-player -S
videojs-flash  //播放rtmp视频要安装
videojs-contrib-hls  //播放m3u8视频要安装
我在项目中实时视频用的是m3u8数据流，以上的操作正常视频格式已经可以使用，还不可以直接使用m3u8数据流格式，以下是兼容.m3u8格式的视频操作

1，需要安装插件videojs-contrib-hls

命令：npm install --save videojs-contrib-hls

2，在main.js里面

const hls =require("videojs-contrib-hls")
Vue.use(hls)

二、引入

可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一）
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.html playsinline不希望用户来拖动进度条

2.js

    export default {
      data() {
        return {
          playerOptions: {
            playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
            autoplay: false, // 如果为true,浏览器准备好时开始回放。
            muted: false, // 默认情况下将会消除任何音频。
            loop: false, // 是否视频一结束就重新开始。
            preload: 'auto', // 建议浏览器在

3.效果图

image.png

四、控制播放和暂停

this.$refs.videoPlayer.player.play() // 播放
this.$refs.videoPlayer.player.pause() // 暂停
this.$refs.videoPlayer.player.src(src) // 重置进度条复制代码

五、回调函数

原文作者：匆匆那年_海，博客主页：https://www.jianshu.com/u/910c0667c515
95后前端汉子，爱编程、优秀、聪明、理性、沉稳、智慧的程序猿一枚。