参考: https://www.jianshu.com/p/00e5f62829ca
<template> <div class="user" style="width:600px;height:600px"> <!-- 播放m3u8视频 --> <video-player class="video-player vjs-custom-skin" :playsinline="true" :options="videoOption"> </video-player> </div> </template> <script> import "videojs-contrib-hls" const defaultFormParam = {
}; export default {
data() {
return {
videoOption:{
live: false, preload: "auto", autoplay: true, language: "zh-CN", aspectRatio: "16:8", fluid: true, sources: [ {
src: 'http://101.39.229.167:83/openUrl/OI3u1vW/live.m3u8' //url地址 } ], notSupportedMessage: "这段视频暂时无法播放,请稍后再试一次", //允许覆盖Video.js无法播放媒体源时显示的默认信息。 controlBar: {
timeDivider: false, durationDisplay: false, remainingTieDisplay: false,
fullscreenToggle: true //全屏按钮
},
flash: {
hls: {
withCredentials: false
}
}
}
}
},
filters: {
},
created() {
},
watch: {
},
methods: {
}
};
</script>