注意坑： 引用的時候 後面路徑有個src 　　

import VideoPlayer　from 'vue-video-player/src'

1、安裝 npm install vue-video-player -S

2、引用

全域性引用 main.js：

元件內部引用

全部頁面：

<template> <div class='demo'> <videoPlayer class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions"> </videoPlayer> </div> </template> <script> import {videoPlayer } from 'vue-video-player/src' import 'vue-video-player/src/custom-theme.css' import 'video.js/dist/video-js.css' export default { components:{ videoPlayer }, data() { return { playerOptions: { //播放速度 playbackRates: [0.5, 1.0, 1.5, 2.0], //如果true,瀏覽器準備好時開始回放。 autoplay: false, // 預設情況下將會消除任何音訊。 muted: false, // 導致視訊一結束就重新開始。 loop: false, // 建議瀏覽器在<video>載入元素後是否應該開始下載視訊資料。auto瀏覽器選擇最佳行為,立即開始載入視訊（如果瀏覽器支援） preload: "auto", language: "zh-CN", // 將播放器置於流暢模式，並在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字（例如"16:9"或"4:3"） aspectRatio: "16:9", // 當true時，Video.js player將擁有流體大小。換句話說，它將按比例縮放以適應其容器。 fluid: true, sources: [ { //型別 type: "video/mp4", //url地址 src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm", }, ], //你的封面地址 poster: "", //允許覆蓋Video.js無法播放媒體源時顯示的預設資訊。 notSupportedMessage: "此視訊暫無法播放，請稍後再試", controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, //全屏按鈕 fullscreenToggle: true, }, }, }; }, }; </script> <style scoped> .video-box { width: 1000px; padding: 20px; } </style>