參考地址：https://www.cnblogs.com/yuezhimou/p/12809182.html

1.安裝

npm install vue-video-player -S

2.main.js

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')

Vue.use(VideoPlayer)

3.使用

<template>
        <video-player  class
 
="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
        ></video-player>
</template>
<script>
export default {
  name: 'BusImg',
  data () {
    return {
      // 視訊播放
      playerOptions : {
        playbackRates: [
 
0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,瀏覽器準備好時開始回放。
        muted: false, // 預設情況下將會消除任何音訊。
        loop: false, // 導致視訊一結束就重新開始。
        preload: 'auto', // 建議瀏覽器在<video>載入元素後是否應該開始下載視訊資料。auto瀏覽器選擇最佳行為,立即開始載入視訊（如果瀏覽器支援）
        language: 'zh-CN',
        aspectRatio: '16:9', // 將播放器置於流暢模式，並在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"）
 

        fluid: true, // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。
        sources: [{
          type: "",
          src: 'http://vjs.zencdn.net/v/oceans.mp4'//url地址          
          // src: "" //url地址
        }],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: '此視訊暫無法播放，請稍後再試', //允許覆蓋Video.js無法播放媒體源時顯示的預設資訊。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  //全屏按鈕
        }
    }
</script>

4.賦值

this.playerOptions['sources'][0]['src'] = '介面地址';

5.樣式問題可以將視訊播放做成元件

6.支援格式

type: "video/webm",
type: "video/ogg",
type: "video/3gp",
type: "video/mp4",