Vue 之 使用hls.js拉流播放m3u8格式视频流

1.如果需要连接现场的局域网，可以先使用EasyConnect连接VPN，使用设备所在的内网
(俺的资源列表有EasyConnect)

2.使用VLC先测试视频流是否存在问题
(俺的资源列表有VLC)

3.进行代码编写
01-下载hls.js

npm install hls.js
yarn add hls.js

 

02-在页面进行引入

import hlsjs from 'hls.js'

03-编写html部分代码

<template>
<div class="playVideo-layout">
<!-- 播放器 -->
<div id="app-container" class="video-box">
　　<video
　　　　ref="videoElement"
　　　　:src="videoUrl"
　　　　id="videoElement"
　　　　controls
　　　　muted
　　　　style="width: 100%; height: 100%; object-fit: fill"
　　></video>
</div>
</div>
</template><script>
　　import hlsjs from "hls.js";
　　export default {
　　name: "About",
　　components: {},
　　data() {
　　　　return {
　　　　　　videoUrl: "http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8",//这里书写路径，例
　　　　};
　　},
　　mounted() {
　　　　this.show();
　　},
　　methods: {
　　//播放
　　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;
　　}
　　},
　　//停止播放
　　closeVideo() {
　　if (this.hlsjs) {
　　　　this.$refs.videoElement.pause();
　　　　this.video.pause();
　　　　this.hlsjs.destroy();
　　　　this.hlsjs = null;
　　　　this.$emit("closeVideo");
　　}
　　},
},
computed: {},
watch: {},
filters: {},
};
</script>

 

4.如果vlc能播放，网页上却播放不了，有可能以下问题
1.确认地址是否拼接有误
2.查看连接的端口是否连通
3.由于部分浏览器不支持视频压缩技术,因此如果前端设备是H2645编码的话，需要改为H264编码 这个很可能出错

5.用于测试的地址
CCTV-1高清 http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
CCTV-3高清 http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8
CCTV-5高清 http://ivi.bupt.edu.cn/hls/cctv5hd.m3u8
CCTV-5+高清 http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8
CCTV-6高清 http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8