1、安装Hls
Vue.js是一个适用于构建用户界面的渐进型框架，它的流行程度已经在现代Web应用开发领域中得到了广泛的认可。而HLS（HTTP Live Streaming）则是一种广泛应用于视频流媒体传输的协议，可以将一个长时间的视频分解为一个个小的TS（Transport Stream）片段进行传输，客户端也可以根据网络状况切换不同的码率。本文将结合Vue.js和HLS协议实现一个Vue Hls的例子。
首先，我们需要在Vue项目中引入hls.js，HLS.js是一个开源的JavaScript库，它实现了解析HLS流并支持HTML5类型的视频播放器。我们可以通过npm install命令安装，也可以在index.html文件中直接引入。下面是通过npm安装示例代码
本文福利， 免费领取C++音视频学习资料包、技术视频/代码，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，编解码，推拉流，srs）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓
npm install hls.js --save2、接着，在Vue项目中构建视频播放器组件，并在其中使用hls.js进行视频流的播放。下面是相关的代码实现：
<script>
import Hls from 'hls.js';
export default {
name: 'VueHlsPlayer',
props: {
url: {
type: String,
required: true
}
},
data() {
return {
hls: null,
src: ''
}
},
mounted() {
if (Hls.isSupported()) {
this.hls = new Hls();
this.hls.loadSource(this.url);
this.hls.attachMedia(this.$refs.video);
this.hls.on(Hls.Events.MANIFEST_PARSED, () => { this.$refs.video.play(); });
}
else if (
this.$refs.video.canPlayType('application/vnd.apple.mpegurl'))
{
this.$refs.video.src = this.url;
this.$refs.video.addEventListener('loadedmetadata', () => {
this.$refs.video.play(); });
}
this.src = this.url;
},
destroyed() {
if (this.hls) {
this.hls.destroy();
}
}
}
</script>
在上述代码中，我们首先引入了Hls.js库，并且在Vue组件中定义了一个video标签，然后通过mounted钩子函数实现了视频的加载、播放和销毁。具体地说，如果浏览器支持Hls，我们就创建一个新的Hls实例，然后通过loadSource方法加载视频源文件。之后，我们通过attachMedia方法将video元素绑定到Hls实例上。最后，在ManifestParsed事件触发后，我们可以调用video元素的play方法开始播放视频。如果浏览器不支持Hls，则通过video元素的src属性来加载视频资源，当元数据加载完成后，也调用video元素的play方法来启动视频。
最后，我们可以在Vue应用中使用VueHlsPlayer组件来实现视频的播放。下面是示例代码：
<VueHlsPlayer :url="url" />
</template>
<script>
import VueHlsPlayer from '@/components/VueHlsPlayer.vue';
export default {
name: 'App',
components: {
VueHlsPlayer
},
data() {
return {
url: 'http://example.com/path/to/video.m3u8'
}
}
}
</script>
通过上述代码即可实现Vue.js和HLS协议的结合，以实现视频流的播放。当然，具体的应用场景和流程取决于实际开发需求，但可以肯定的是，本文所提供的示例代码可以作为一个很好的参考，帮助你更好地理解Vue.js和HLS协议的结合。
3、遍历渲染多个视频播放
<template>
<div class="monitorWarp">
<div class="monitorItem">
<div class="item" v-for="(item, index) in videoList" :key="index">
<video
:ref="['videoElement' + index]"
controls
muted
preload="auto"
style="width:100%;height:100%; fit:fill;"
></video>
</div>
</div>
</div>
</template>
<script>
import { getRealMonitor } from "../api.js";
import Hls from "hls.js";
export default {
data() {
return {
videoList: []
};
},
created() {},
computed: {},
mounted() {
this.RealMonitor();
},
methods: {
RealMonitor() {
getRealMonitor(this.params).then(res => {
console.log(res, "实时监控");
this.videoList = res.result;
this.videoList.forEach((item, index) => {
console.log(item);
this.showVideo(item, "videoElement" + index);
});
});
},
showVideo(url, refId) {
console.log(url, refId, "节点");
let video = refId; //定义挂载点
this.hlsjs = new Hls();
this.hlsjs.loadSource(url);
this.hlsjs.attachMedia(video);
this.hlsjs.on(Hls.Events.MANIFEST_PARSED, () => {
video.play();
});
this.hlsjs.on(Hls.Events.ERROR, (event, data) => {
console.log(event, data);
// 监听出错事件
console.log("加载失败");
});
}
}
};
</script>
<style lang="less" scoped>
.monitorWarp {
.monitorItem {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
.item {
width: 224px;
height: 168px;
background-color: #143354;
margin-top: 2px;
border: solid 2px #2677f1;
}
}
}
</style>
4、vue+原生
通过上述代码即可实现Vue.js和HLS协议的结合，以实现视频流的播放。当然，具体的应用场景和流程取决于实际开发需求，但可以肯定的是，本文所提供的示例代码可以作为一个很好的参考，帮助你更好地理解Vue.js和HLS协议的结合。
本文福利， 免费领取C++音视频学习资料包、技术视频/代码，内容包括（音视频开发，面试题，FFmpeg ，webRTC ，rtmp ，hls ，rtsp ，ffplay ，编解码，推拉流，srs）↓↓↓↓↓↓见下面↓↓文章底部点击免费领取↓↓