安装video.js
"videojs-contrib-hls": "5.14.1",
"videojs-contrib-hls.js": "3.2.0",
"videojs-flash": "2.1.0",
"vue-video-player": "4.0.6"
"video.js": "^7.12.3",
引入video.js
/* 视频监控插件 */
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import 'videojs-flash'
import 'videojs-contrib-hls/dist/videojs-contrib-hls'
Vue.use(VueVideoPlayer)
html
<ul>
<li class="carousel-item" v-for="(item, index) in videoConfig" :key="index">
<video-player
class="vjs-custom-skin videosa"
:options="item"
></video-player>
</li>
</ul>
js
data() {
return {
list:[//视频源
'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8',
'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8',
],
videoConfig:[],//视频配置信息
};
},
methods: {
getVideoList() {
for (let i in this.list) {
this.videoConfig.push({
// playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: true, //自动播放。
controls: true, //控制条
preload: "auto", //视频预加载
muted: false, //默认情况下将会消除任何音频。
loop: false, //导致视频一结束就重新开始。
language: "zh-CN",
aspectRatio: "16:9", // 视频比例(例如"16:9"或"4:3")
fluid: true, //窗体自适应
sources: [
{
type: "application/x-mpegURL",
src: this.list[i]
}
],
// poster:"", //视频封面
// width: document.documentElement.clientWidth,
notSupportedMessage: "此视频暂无法播放,请稍后再试"
});
}
},
},
mounted(){
this.getVideoList();
},
引入video.js并使用
最新推荐文章于 2024-06-16 15:54:56 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)