JavaScript Vue CSS
Clone or download
Latest commit 523b99c Feb 1, 2018
Permalink
Failed to load latest commit information.
.github reconsitution Jan 9, 2018
config fix #142 Feb 1, 2018
dist fix #142 Feb 1, 2018
examples update Jan 17, 2018
src fix #142 Feb 1, 2018
test reconsitution Jan 9, 2018
.babelrc webpack config Jan 9, 2018
.eslintignore webpack config Jan 9, 2018
.eslintrc.js webpack config Jan 9, 2018
.gitignore reconsitution Jan 9, 2018
.npmignore reconsitution Jan 9, 2018
.travis.yml webpack config Jan 9, 2018
CHANGELOG.md fix #142 Feb 1, 2018
LICENSE reconsitution Jan 9, 2018
README.md update README.md Jan 10, 2018
bower.json reconsitution Jan 9, 2018
package.json fix #142 Feb 1, 2018

README.md

GitHub stars Build Status GitHub issues GitHub forks GitHub last commit license Twitter

NPM NPM

Vue-Video-Player

video.js player 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

videojs plugins

Author

Surmon