一、安裝vue-video-player

npm install vue-video-player

二、安裝vue-loader

npm install vue-loader

三、在plugins目錄下創(chuàng)建video.js文件

import Vue from 'vue';

const VueVideoPlayer= require('vue-video-player/dist/ssr');
const hls = require('videojs-contrib-hls');
import 'vue-video-player/src/custom-theme.css';

import Video from 'video.js';
import 'video.js/dist/video-js.css';

import zhCN from './video-zh-CN.json';

import 'videojs-flash';

const SWF_URL=require('videojs-swf/dist/video-js.swf');

Video.options.flash.swf = SWF_URL; // 設置flash路徑，Video.js會在不支持html5的瀏覽中使用flash播放視頻文件
Video.addLanguage('zh-CN', zhCN);// 添加中文支持
Vue.use(hls);
Vue.use(VueVideoPlayer);

四、在plugins目錄下創(chuàng)建video-zh-CH.json文件

拷貝node_modules/video/dist/lang/zh-CH.js中的json數據到video-zh-CH.json
注意拷貝的是json數據。不要拷貝其他數據

五、配置nuxt.config.js

  plugins: [
    {src: "@/plugins/video", ssr: false},
  ],
  build: {
    extend(config, {isDev, isClient}) {
      config.module.rules.push({
        test: /\.swf$/,
        loader: "url-loader",
        options:{
          limit: 10000
        }
      });
    }
  }

六、SPA使用

template

<video-player
  class="confVideo vjs-custom-skin video-player"
  ref="videoPlayer"
  :options="playerOptions"
  :playsinline="true"
  customEventName="customstatechangedeventname"
  @ready="playerReadied"
  @loadeddata="onPlayerLoadeddata($event)"
  @canplay="onPlayerCanplay($event)"
  @canplaythrough="onPlayerCanplaythrough($event)"
  @play="onPlayerPlay($event)"
  @playing="onPlayerPlaying($event)"
  @timeupdate="onPlayerTimeupdate($event)"
  @pause="onPlayerPause($event)"
  @waiting="onPlayerWaiting($event)"
  @ended="onPlayerEnded($event)"
  @statechanged="playerStateChanged($event)"
  >
</video-player>

script

import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
  components: {
    videoPlayer
  },
  mounted() {
      console.log('當前videojs對象', this.player)
    },
  computed: {
      player() {
        return this.$refs.videoPlayer.player
      }
    },
}

七、SSR使用

template

<div
  v-video-player:myVideoPlayer="playerOptions"
  class="confVideo vjs-custom-skin video-player"
  ref="videoPlayer"
  :playsinline="true"
  customEventName="customstatechangedeventname"
  @ready="playerReadied"
  @loadeddata="onPlayerLoadeddata($event)"
  @canplay="onPlayerCanplay($event)"
  @canplaythrough="onPlayerCanplaythrough($event)"
  @play="onPlayerPlay($event)"
  @playing="onPlayerPlaying($event)"
  @timeupdate="onPlayerTimeupdate($event)"
  @pause="onPlayerPause($event)"
  @waiting="onPlayerWaiting($event)"
  @ended="onPlayerEnded($event)"
  @statechanged="playerStateChanged($event)"
></div>

script

<script>
  export default {
    mounted() {
      console.log('當前videojs對象, this.myVideoPlayer)
    }
    // Omit the same parts as in the following component sample code
    // ...
  }
</script>

data

playerOptions: {
  techOrder: ['html5', 'flash'], // 兼容順序,使用flash播放，可以播放flv格式的文件
  playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
  autoplay: false, // 如果true,瀏覽器準備好時開始回放
  notSupportedMessage: '此視頻暫無法播放!', // 無法播放時顯示的信息
  sourceOrder: true,
  loop: false, // 導致視頻一結束就重新開始。
  // preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應該開始下載視頻數據。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
  muted: true, // 默認情況下將會消除任何音頻。
  language: 'zh-CN',
  // aspectRatio: '16:9', // 將播放器置于流暢模式，并在計算播放器的動態(tài)大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
  fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
  hls: true, //啟用hls？
  flash: {
    hls: { withCredentials: false },
    swf: '/videojs/video-js.swf'
  },
  html5: { hls: { withCredentials: false } },
  sources: [
    {
      type: 'video/mp4', // 資源格式寫法：'video/mp4'
      src: '/video/1.mp4' // 本地資源地址，注意：本地資源存放在public文件夾中，本文視頻資源路徑public/video/1.mp4
    }，
    {
      // withCredentials: true，
      type: 'application/x-mpegURL', // hls
      src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8' // url地址
    }，
    {
      type:'rtmp/flv',//rtmp
      src:'rtmp://live.hkstv.hk.lxdns.com/live/hks'//rtmp
    },
    {
      type: 'rtmp/flv',//rtmp
      src: `rtmp://58.200.131.2:1935/livetv/hunantv`
    },
    {
      type: 'rtmp/mp4', // 資源格式寫法：'video/mp4'
      src: 'rtmp://' // url地址
    }
  ],
  poster: 'path', // 你的封面地址
  // width: document.documentElement.clientWidth,
  // height: this.fileAreaHeight, // 設置高度，fluid需要設置成flase
  // 配置控制欄
  controlBar: {
    volumePanel: {
      inline: false //音量調節(jié)是否水平
    },
    currentTimeDisplay: true, //當前播放位置
    timeDivider: false, // 時間分割線
    durationDisplay: false, // 總時間
    progressControl: true, // 進度條
    remainingTimeDisplay: false, // 剩余時間
    fullscreenToggle: true // 全屏按鈕
  }
},

參考文章

【Nuxt】四、vue-video-player使用