1.安裝依賴 npm install vue-video-player videojs-contrib-hls --save 2.建立videoplayer外掛

import Vue from 'vue'

const VueVideoPlayer = require('vue-video-player/dist/ssr')
const hls = require('videojs-contrib-hls')
Vue.use(hls)
Vue.use(VueVideoPlayer)

3.配置nuxt.config.js

plugins: [ '@/plugins/videoplayer' ]

4.使用

<template>
  <section>
    <div
      v-video-player:myVideoPlayer="playerOptions"
      :playsinline="playsinline"
      class="video-player-box vjs-big-play-centered"
      @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)"
      @ready="playerReadied"
      @statechanged="playerStateChanged($event)"/>
  </section>
</template>

<script>
export default {
  data() {
    return {
      playsinline: true,
      playerOptions: {
        muted: true,
        controls: true,
        language: 'lang', 
        playbackRates: [0.7, 1.0, 1.5, 2.0],  //播放速率
        sources: [
          {
            type: 'application/x-mpegURL',
            src: ''  //視訊流地址
          }
        ],
        hls: true,  //啟用hls？
        fluid: true,  //設定播放器為流體  寬度為外層盒子大小  ps：想設定width：100%找不到方法？這個就對了
        poster: "/static/images/author.jpg"
      }
    }
  },
  methods: {
    // listen event
    onPlayerPlay(player) {
      // console.log('player play!', player)
    },
    onPlayerPause(player) {
      // console.log('player pause!', player)
    },
    onPlayerEnded(player) {
      // console.log('player ended!', player)
    },
    onPlayerLoadeddata(player) {
      // console.log('player Loadeddata!', player)
    },
    onPlayerWaiting(player) {
      // console.log('player Waiting!', player)
    },
    onPlayerPlaying(player) {
      // console.log('player Playing!', player)
    },
    onPlayerTimeupdate(player) {
      // console.log('player Timeupdate!', player.currentTime())
    },
    onPlayerCanplay(player) {
      // console.log('player Canplay!', player)
    },
    onPlayerCanplaythrough(player) {
      // console.log('player Canplaythrough!', player)
    },
    // or listen state event
    playerStateChanged(playerCurrentState) {
      // console.log(playerCurrentState)
    },
    // player is ready
    playerReadied(player) {
      // console.log('example 01: the player is readied', player)
    }
  }
}
 

完結！！！