參考：http://www.reibang.com/p/23b03e11d902
參考：https://blog.csdn.net/qq_54879026/article/details/124232085

• 首先安裝依賴：npm install vue-video-player -S
• 此插件用到了sass相關(guān)依賴剖膳，所以需要安裝sass
• 我的node版本是v16.14.0召锈，踩了無數(shù)個sass版本的坑后，終于找到了對應(yīng)nodeV16版本的sass芬萍。
• 版本安裝錯誤時，卸載錯誤版本的sass
• npm uninstall node-sass
• npm uninstall sass-loader -D
• 然后安裝
• npm i sass-loader@10.2.0 -D
• npm i node-sass@6.0.1 -D
• 在mian.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)

• 在頁面中使用

<template>
  <div class="userActionVideo">
    <h1 class="title">遼寧省【繼教項目報名】</h1>
    <h1 class="title">操作視頻</h1>
    <div class="video">
      <video-player
        class="video-player vjs-custom-skin"
        ref="videoPlayer"
        :playsinline="true"
        :options="playerOptions"
      ></video-player>
    </div>
  </div>
</template>
<script>
export default {
  name: "UserActionVideo",
  data() {
    return {
      // 視頻播放
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,瀏覽器準備好時開始回放蕉斜。
        muted: false, // 默認情況下將會消除任何音頻钮惠。
        loop: false, // 導致視頻一結(jié)束就重新開始。
        preload: "auto", // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)猿推。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 將播放器置于流暢模式，并在計算播放器的動態(tài)大小時使用該值捌肴。值應(yīng)該代表一個比例 - 用冒號分隔的兩個數(shù)字（例如"16:9"或"4:3"）
        fluid: true, // 當true時蹬叭，Video.js player將擁有流體大小藕咏。換句話說，它將按比例縮放以適應(yīng)其容器秽五。
        sources: [
          {
            type: "",
            src: "https://mvw-cme-pro.oss-cn-beijing.aliyuncs.com/lning/templates/operate-video.mp4", //url地址
            // src: "" //url地址
          },
        ],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此視頻暫無法播放孽查，請稍后再試", //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true, //全屏按鈕
        },
      },
    };
  },
  created() {},
  methods: {},
};
</script>
<style lang="less" scoped >
.userActionVideo {
  padding: 10px 10px 50px;
  .title {
    text-align: center;
  }
  .video {
    margin-top: 20px;
  }
}
</style>