使用
安裝：
npm install vue-video-player --save-
在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)這里需要注意构韵，我們?nèi)绻凑展倬W(wǎng)上的方式如上代碼所示引入吗铐，會報錯找不到
video.js/dist/video-js.css支竹。
這里我們只需要將引入video-js.css的路徑改為vue-video-player/node_modules/video.js/dist/video-js.css。
如：require('vue-video-player/node_modules/video.js/dist/video-js.css')噩翠。 -
在頁面中引用
<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true" :options="playerOptions" ></video-player> -
配置數(shù)據(jù)
playerOptions : { playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度 autoplay: false, //如果true,瀏覽器準(zhǔn)備好時開始回放。 muted: false, // 默認(rèn)情況下將會消除任何音頻蛤袒。 loop: false, // 導(dǎo)致視頻一結(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, // 當(dāng)true時，Video.js player將擁有流體大小轧铁。換句話說每聪，它將按比例縮放以適應(yīng)其容器。 sources: [{ type: "",//這里的種類支持很多種：基本視頻格式齿风、直播药薯、流媒體等，具體可以參看git網(wǎng)址項目 src: "" //url地址 }], poster: "../../static/images/test.jpg", //你的封面地址 // width: document.documentElement.clientWidth, //播放器寬度 notSupportedMessage: '此視頻暫無法播放救斑，請稍后再試', //允許覆蓋Video.js無法播放媒體源時顯示的默認(rèn)信息童本。 controlBar: { timeDivider: true, durationDisplay: true, remainingTimeDisplay: false, fullscreenToggle: true //全屏按鈕 } } -
具體其他的按鈕樣式可以在外部css中設(shè)置
如： // 調(diào)整播放器樣式 .video-js .vjs-icon-placeholder { width: 100%; height: 100%; display: block; } -
效果圖
效果圖-1
效果圖-2
效果圖-3
人生的路，好與不好都要走過脸候，無論坎坷穷娱，還是平坦，無論順利运沦，還是棘手泵额，一些路，一些事携添，總得自己去面對嫁盲。
