vue中通过hls.js播放m3u8格式的视频

近期做了一个功能，是接入一个海康的摄像头的监控视频，怎么获取m3u8的视频这里就不在叙述了，只说一下怎么将m3u8格式的视频成功播放

 

一、m3u8和HLS介绍

1.M3U8文件是指UTF-8编码格式的M3U文件。M3U文件是记录了一个索引纯文本文件,打开它时播放软件并不是播放它,而是根据它的索引找到对应的音视频文件的网络地址进行在线播放。

2.HLS 与 M3U8 HLS(全称:Http Live Streaming)是由Apple公司定义的用于实时流传输的协议

 

 

二、nuxt项目中使用HLS播放m3u8

 

1.安装hls.js依赖

 可以通过npm安装依赖   npm install hls.js --save  ，也可以通过引入的方式 <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> 

 

2.代码实现

<template>
  <section>
    <video class="full-height full-width" ref="video" controls></video>
  </section>
</template>

<script> let Hls = require('hls.js'); export default { data() { return { hls: '' }; }, mounted() { this.$axios.get('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx').then(res => { this.getStream(res.data); }); }, methods: { videoPause() { if (this.hls) { this.$refs.video.pause(); this.hls.destroy(); this.hls = null; } }, getStream(source) { if (Hls.isSupported()) { this.hls = new Hls(); this.hls.loadSource(source); this.hls.attachMedia(this.$refs.video); this.hls.on(Hls.Events.MANIFEST_PARSED, () => { console.log('加载成功'); this.$refs.video.play(); }); this.hls.on(Hls.Events.ERROR, (event, data) => { // console.log(event, data);
            // 监听出错事件
            console.log('加载失败'); }); } }, beforeDestroy() { this.videoPause(); } } }; </script>

 

页面初始化mounted的时候，获取到m3u8视频的链接，然后通过getStream()方法加载视频，也通过videoPause()方法停止视频播放

 

嗯，首先要感谢大佬的教导，就酱~~