vue.js 视频播放

最近心学习vue.js开发，video开发播放！

使用第三方的封装：https://www.npmjs.com/package/vue-video-player；

1. npm install vue-video --save 安装播放第三方插件；

2.在main.js中

import VueVideoPlayer from 'vue-video-player'

 

Vue.use(VueVideoPlayer)

 

3.使用vue里边

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

 

//声明组建

components: {

Header,

videoPlayer

}

 

使用

<template>

  <video-player  ref="videoPlayer"

                 :options="playerOptions"

 

                 title="you can listen some event if you need"

                 @play="onPlayerPlay($event)"

                 @pause="onPlayerPause($event)"

                 @ended="onPlayerEnded($event)"

                 @loadeddata="onPlayerLoadeddata($event)"

                 @waiting="onPlayerWaiting($event)"

                 @playing="onPlayerPlaying($event)"

                 @timeupdate="onPlayerTimeupdate($event)"

                 @canplay="onPlayerCanplay($event)"

                 @canplaythrough="onPlayerCanplaythrough($event)"

 

                 title="or listen state change"

                 @statechanged="playerStateChanged($event)"

 

                 title="The prepared event will be triggered after the videojs program instance completes, and its callback player object is the videojs callback function in this context"

                 @ready="playerReadied">

  </video-player>

</template>

 

<script>

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

  // require('some-videojs-plugin')

  export default {

    data() {

      return {

        playerOptions: {

 

          // component options

          start: 0,

          playsinline: false,

 

          // 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>