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>