Vue-Video-Player 在github官方文档

Vue-Video-Player

video.jsplayer component for Vue.

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

Example

Demo Page

CDN Example

nuxt.js/ssr example code

More Example Code

Install

CDN

<link rel\="stylesheet" href\="path/to/video.js/dist/video-js.css"/>
<script type\="text/javascript" src\="path/to/video.min.js"\></script\>
<script type\="text/javascript" src\="path/to/vue.min.js"\></script\>
<script type\="text/javascript" src\="path/to/dist/vue-video-player.js"\></script\>
<script type\="text/javascript"\>
 Vue.use(window.VueVideoPlayer)
</script\>

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

<template\>
  <video-player  class\="video-player-box"
                 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"\>
  </video-player\>
</template\>

<script\>
 // 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\]
   }
  }
 }
 </script\>

SSR

<!-- You can custom the "myVideoPlayer" name used to find the videojs instance in current component \-->
<template\>
  <div class\="video-player-box" 
       @play\="onPlayerPlay($event)"
       @pause\="onPlayerPause($event)"
       @ready\="playerReadied"
       @statechanged\="playerStateChanged($event)"
       v-video-player:myVideoPlayer\="playerOptions"\>
  </div\>
</template\>

<script\>
 export default {
 mounted() {
 console.log('this is current videojs instance object', this.myVideoPlayer)
 }
 // Omit the same parts as in the following component sample code
 // ...
 }
</script\>

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

• video.js api

  • video.js options
  • video.js docs

videojs plugins

• videojs-resolution-switcher
• videojs-contrib-hls
• videojs-youtube
• videojs-vimeo
• videojs-hotkeys
• videojs-flash
• videojs-contrib-ads
• more plugins...

Author

Surmon