在Vue中使用video.js播放器组件(vue-video-player)

这篇文章主要介绍了vue视频播放插件vue-video-player的具体使用方法

地址：vue-video-player - npmvideo.js component for Vuehttps://www.npmjs.com/package/vue-video-player

 Vue 视频播放器 基本示例：
vue-video-playerhttp://github.surmon.me/vue-video-player/        

video.js选项参考：Tutorial: options | Video.js Documentationhttps://docs.videojs.com/tutorial-options.html

安装

npm install vue-video-player --save

引入

可以全局引入插件，也可以在需要用到该插件的组件内单独引入（二选一）

1.全局引用， 在main.js里面导入并引用

import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
 
Vue.use(VueVideoPlayer /* video.js */)

2.组件内引用

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

使用

html部分 

js部分 

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

视频格式

type："video/webm" // 可以播放，用ogg也可打开
type："video/ogg" // 可以播放，用webm也可打开
type："video/3gp" // 可以播放
type："video/mp4" // 可以播放
type："video/avi" // 打不开
type："video/flv" // 打不开
type："video/mkv" // 打不开
type："video/mov" // 打不开
type："video/mpg" // 打不开
type："video/swf" // 打不开
type："video/ts"  // 打不开
type："video/wmv" // 打不开
type："video/vob" // 没转化
type："video/mxf" // 转化出错
type: "video/rm"  // 转化出错

控制播放和暂停

this.$refs.videoPlayer.player.play() // 播放
this.$refs.videoPlayer.player.pause() // 暂停
this.$refs.videoPlayer.player.src(src) // 重置进度条
this.$refs.videoPlayer.player.load() //重新加载

回调函数

适用于 Vue3 的 hls.js 播放器组件 

地址：vue3-video-play - npmhttps://www.npmjs.com/package/vue3-video-play

快速上手：Vue3-video-play | Vue3VideoPlayVue3VideoPlay 基于vue3编写的视频播放器https://codelife.cc/vue3-video-play/guide/install.html