vue中通过hls.js播放m3u8格式的视频
2023-09-27 14:24:13 时间
近期做了一个功能,是接入一个海康的摄像头的监控视频,怎么获取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()方法停止视频播放
嗯,首先要感谢大佬的教导,就酱~~
相关文章
- vue中created,mounted,methods,watch,computed各方法解释
- vue - .postcssrc.js
- 【Vue/js】通过localStorage浏览器实现变量和对象的本地缓存(图文+完整源代码)
- 【Vue】单击click事件综合示例和防冒泡方法
- Vue - 实现动态且 “可重复“ 开启与关闭动画,由 JS 点击 / 长按等事件控制开启 “某个元素“ 的 CSS 动画(类似常见的点赞动画效果可以一直重复触发动画)详细示例源代码教程
- Vue项目--尚品汇(axios重写,代理服务器、API统一管理)
- 【前端】vue组件之间数据传递/父子组件/父传子/子传父/兄弟组件
- (26)打鸡儿教你Vue.js
- Web前端-Vue.js必备框架(一)
- vue版本更新index.html缓存
- vue引入外部js数据
- Vue中ESlint配置文件eslintrc.js文件详解
- vue.js不仅是一种模式,也是一种工程组织方式
- Vue Router安装与基本使用
- vue-router4之导航守卫
- vue+elementUI项目,父组件向子组件传值,子组件向父组件传值,父子组件互相传值。
- Vue.js系列之三模板语法
- Vue.js 技术揭秘学习 (1) new Vue 发生了什么
- 浅谈vue中插件的使用方法Vue.use(xxx),原理及实现
- Vue常见问题及解决-页面刷新vuex状态初始化
- vue项目无法删除