Narcissistic Project Managers

    vue-video-player

    5.0.2 • Public • Published

    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

    Install

    npm i vue-video-player

    DownloadsWeekly Downloads

    16,697

    Version

    5.0.2

    License

    MIT

    Last publish

    Collaborators

    • surmon