***** git項目地址： https://github.com/surmon-china/vue-video-player

***** 參考文章： https://www.jianshu.com/p/532fc1d8c90c

使用

安裝：

npm install vue-video-player --save

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)

這里需要注意，我們如果按照官網上的方式如上代碼所示引入，會報錯找不到

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')。

3. 在頁面中引用

<video-player class="video-player"ref="videoPlayer":playsliline="true":options="playerOptions"> </video-player>

4. 配置數據

playerOptions: {playbackRates: [0.7,1.0,1.5,2.0], //播放速度autoplay： false，//如果true，瀏覽器準備好時自動開始播放muted： flase，//默認情況下將會消除任何音頻loop： false，//導致視頻一結束就重新開始preload： 'auto', //language：'zh-CN',aspectRatio: '16:9', //將播放器至于流暢模式，并在計算播放器動態大小時使用該值fluid： true， //當true時，Video.js player將擁有流體大小，按比例適應其容器source： [{type: "", //播放視頻種類： 基本視頻格式、直播、流媒體等src： "", //視頻的url地址}]poster: "../../static/images/test.jpg", //你的封面地址notSupportedMessage: '此視頻暫無法播放，請稍后再試', //允許覆蓋Video.js無法播放媒體源時顯示的默認信息。controlBar: {timeDivider: true, //進度條durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true //全屏按鈕} }}

5. 具體其他的按^[1]鈕樣式可以在外部css中設置

如： // 調整播放器樣式 .video-js .vjs-icon-placeholder {width: 100%;height: 100%;display: block; }

6. 效果圖

效果圖1

效果圖2

效果圖3

參考

^參考文章?https://www.jianshu.com/p/532fc1d8c90c

總結

以上是生活随笔為你收集整理的vue aplayer 进度条无法拖动_Vue-rideo-player视频播放插件的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。