参考:https://blog.csdn.net/a15297701931/article/details/115478652
cnpm hls.js
<video ref="videoElement" id="videoElement" muted style="width: 100%; height: 100%; object-fit: fill" :src="videoUrl" ></video>
import hlsjs from "hls.js"; data(){ return { videoUrl: "http://****.m3u8", } } //播放 show() { this.video = this.$refs.videoElement; //定义挂载点 console.log(this.video); if (hlsjs.isSupported()) { this.hlsjs = new hlsjs(); this.hlsjs.loadSource(this.videoUrl); //设置播放路径 this.hlsjs.attachMedia(this.video); //解析到video标签上 console.log(this.hlsjs); this.hlsjs.on(hlsjs.Events.MANIFEST_PARSED, () => { this.video.play(); console.log("加载成功"); }); this.hlsjs.on(hlsjs.Events.ERROR, (event, data) => { // console.log(event, data); // 监听出错事件 console.log("加载失败"); }); } else { this.$message.error("不支持的格式"); return; } }, mounted() { this.show(); },
标签:vue,console,log,m3u8,视频流,hls,hlsjs,video From: https://www.cnblogs.com/jqynr/p/16935344.html