vue-video-player文档_Vue-Video-Player 在github官方文档

Vue-Video-Player

video.jsplayer component for Vue.

适用于 Vue 的video.js播放器组件。

Example

Install

CDN

Vue.use(window.VueVideoPlayer)

NPM

npm install vue-video-player --save

Mount

mount with global

import Vue from 'vue'

import VueVideoPlayer from 'vue-video-player'

// require videojs style

import 'video.js/dist/video-js.css'

// import 'vue-video-player/src/custom-theme.css'

Vue.use(VueVideoPlayer, /\* {

options: global default options,

events: global videojs events

} \*/)

mount with component

// require styles

import 'video.js/dist/video-js.css'

import { videoPlayer } from 'vue-video-player'

export default {

components: {

videoPlayer

}

}

mount with ssr

// If used in nuxt.js/ssr, you should keep it only in browser build environment

if (process.browser) {

const VueVideoPlayer \= require('vue-video-player/dist/ssr')

Vue.use(VueVideoPlayer)

}

videojs extend

import videojs from 'video.js'

// videojs plugin

const Plugin \= videojs.getPlugin('plugin')

class ExamplePlugin extends Plugin {

// something...

}

videojs.registerPlugin('examplePlugin', ExamplePlugin)

// videojs language

videojs.addLanguage('es', {

Pause: 'Pausa',

// something...

})

// more videojs api...

// vue component...

Difference(使用方法的异同)

SSR and the only difference in the use of the SPA:

SPA worked by the component, find videojs instance by ref attribute.

SSR worked by the directive , find videojs instance by directive arg.

Other configurations, events are the same.

SPA

ref\="videoPlayer"

:options\="playerOptions"

:playsinline\="true"

customEventName\="customstatechangedeventname"

@play\="onPlayerPlay($event)"

@pause\="onPlayerPause($event)"

@ended\="onPlayerEnded($event)"

@waiting\="onPlayerWaiting($event)"

@playing\="onPlayerPlaying($event)"

@loadeddata\="onPlayerLoadeddata($event)"

@timeupdate\="onPlayerTimeupdate($event)"

@canplay\="onPlayerCanplay($event)"

@canplaythrough\="onPlayerCanplaythrough($event)"

@statechanged\="playerStateChanged($event)"

@ready\="playerReadied"\>

// Similarly, you can also introduce the plugin resource pack you want to use within the component

// import 'some-videojs-plugin'

export default {

data() {

return {

playerOptions: {

// videojs options

muted: true,

language: 'en',

playbackRates: \[0.7, 1.0, 1.5, 2.0\],

sources: \[{

type: "video/mp4",

src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen\_synd\_768k\_vp8.webm"

}\],

poster: "/static/images/author.jpg",

}

}

},

mounted() {

console.log('this is current player instance object', this.player)

},

computed: {

player() {

return this.$refs.videoPlayer.player

}

},

methods: {

// listen event

onPlayerPlay(player) {

// console.log('player play!', player)

},

onPlayerPause(player) {

// console.log('player pause!', player)

},

// ...player event

// or listen state event

playerStateChanged(playerCurrentState) {

// console.log('player current update state', playerCurrentState)

},

// player is ready

playerReadied(player) {

console.log('the player is readied', player)

// you can use it to do something...

// player.\[methods\]

}

}

}

SSR

@play\="onPlayerPlay($event)"

@pause\="onPlayerPause($event)"

@ready\="playerReadied"

@statechanged\="playerStateChanged($event)"

v-video-player:myVideoPlayer\="playerOptions"\>

export default {

mounted() {

console.log('this is current videojs instance object', this.myVideoPlayer)

}

// Omit the same parts as in the following component sample code

// ...

}

Issues

videojs-contrib-hls - e is not defined

API

component api:

events:[ Array, default: [] ]: custom videojs event to component

playsinline:[ Boolean, default: false ]: set player not full-screen in mobile device

crossOrigin:[ String, default: '' ]: set crossOrigin to video

customEventName:[ String, default: 'statechanged' ]: custom the state change event name

videojs plugins

Author