首先庐冯，我們需要在vue工程中安裝video.js相關(guān)依賴吐绵。
npm install --save video.js
npm install --save videojs-contrib-hls
npm install --save videojs-flash
接著彼哼，我們在需要播放視頻的頁面引入js對(duì)象
import videojs from 'video.js/dist/video.min'
import 'video.js/dist/video-js.min.css'
import 'videojs-flash/dist/videojs-flash';
指定一個(gè)video容器对妄，例如
<video id="my-video" class="video-js vjs-default-skin" controls preload="auto" poster="../assets/video.png">
<source src="http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8" type="application/x-mpegURL">
</video>
最后，我們在mounted節(jié)點(diǎn)初始化播放器：
videojs('my-video', {
bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
}, function () {
this.play()
})
多視頻列表循環(huán)播放代碼
<div v-for="(item,index) in vedioData" :key="'spqymain'+index">
<video :id="'my-video'+index" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" style='width: 100%;height: 100%'>
<source :src="item.path" style='width: 100%;height: 100%' type="application/x-mpegURL">
</video>
</div>
export default {
data() {
return {
vedioData: [
{
region: "煙臺(tái)市蓬萊閣景區(qū)1",
path:
"http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8",
type: "application/x-mpegURL" //播放hls流
},
{
region: "煙臺(tái)市蓬萊閣景區(qū)2",
path:
"http://1252093142.vod2.myqcloud.com/4704461fvodcq1252093142/f865d8a05285890787810776469/playlist.f3.m3u8",
type: "application/x-mpegURL" //播放hls流
},
]
};
},
mounted() {
//id必須是唯一的敢朱，遍歷id,
for(let i=0;i<this.vedioData.length;i++){
videojs(
"my-video"+i,
{
// bigPlayButton: false,
textTrackDisplay: false,
posterImage: true,
errorDisplay: false,
controlBar: true
},
function() {
this.play();
}
);
}
},
}
轉(zhuǎn)載自：https://blog.csdn.net/xingchen678/article/details/100900846
