安裝插件? ：
注意需要引入??videojs-contrib-hls ，否則無法播放hls流文件?
npm install vue-video-player@5.0.1 --save
npm install videojs-contrib-hls@5.15.0 --savemain.js 引入
require('vue-video-player/src/custom-theme.css')
require('video.js/dist/video-js.css')
import VideoPlayer from 'vue-video-player'
import hls from "videojs-contrib-hls";
Vue.use(VideoPlayer)
Vue.use(hls);代碼內(nèi)引入：
注意點：???
1.type: 'application/x-mpegURL' ，否則無法播放流文件?
2.aspectRatio: '16:9',? 寬高比需要進行設(shè)置， 若沒有進行設(shè)置，會出現(xiàn)黑邊過高或者過寬的問題文章來源：http://www.zghlxwxcb.cn/news/detail-731896.html
<video-player ref="videoPlayer" :options="playerOptions" class="video-player vjs-custom-skin"/>
playerOptions: {
autoplay: true,
hls:true,
aspectRatio: '16:9',
fluid: false,
sources: [
{
src: '',
// type: 'video/mu38'
type: 'application/x-mpegURL'
}
],
},
常用API方法：文章來源地址http://www.zghlxwxcb.cn/news/detail-731896.html
// 加載視頻
this.$refs.videoPlayer.player.load();
// 播放視頻
this.$refs.videoPlayer.player.play();
// 暫停播放
this.$refs.videoPlayer.player.pause();
// 直接全屏 如果當前設(shè)備支持的話
this.$refs.videoPlayer.player.requestFullscreen();到了這里，關(guān)于vue2 使用 vue-video-player 播放m3u8 流地址視頻的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
