vue中通过hls.js播放m3u8格式的视频
近期做了一个功能,是接入一个海康的摄像头的监控视频,怎么获取m3u8的视频这里就不在叙述了,只说一下怎么将m3u8格式的视频成功播放
一、m3u8和HLS介绍
<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中通过hls.js播放m3u8格式的视频的更多相关文章
- 微信 vue中使用video.js播放m3u8视频,解决安卓自动全屏的问题。
最近一个项目中需要在微信中播放m3u8格式的视频,刚开始用了 vue-video-player 这个插件,在IOS手机体验良好,本以为完事了, 结果安卓手机一点播放就自动全屏,心态略崩.查了资料说是安 ...
- 流媒体测试笔记记录之————解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
详细代码Github:https://github.com/Tinywan/PHPSharedLibrary/tree/master/Tpl/Html5/VideoJS 想播放hls协议的就是m3u8 ...
- 流媒体技术学习笔记之(四)解决问题video.js 播放m3u8格式的文件,根据官方的文档添加videojs-contrib-hls也不行的原因解决了
源码地址:https://github.com/Tinywan/PHP_Experience 总结: 说明: 测试环境:本测试全部来自阿里云直播和OSS存储点播以及本地服务器直播和点播 播放器:Vid ...
- html页面引用video.js播放m3u8格式视频
//head里面的内容,我是采用cdn引用的方式,因为项目太小 <head> <meta charset="utf-8" /> <title>二 ...
- 在vue项目中播放m3u8格式视频
前言:最近公司在做一个线上会议的项目,要求后台网站播放m3u8格式的视频,查找部分资料,总结一下,方便后边查阅 1.在vue工程中安装以下依赖: cnpm install video.js --sa ...
- video.js支持m3u8格式直播
为什么要使用video.js? 1. PC端浏览器并不支持video直接播放m3u8格式的视频 2. 手机端各式各样的浏览器定制的video界面风格不统一,直接写原生的js控制视频兼容性较差 3. v ...
- 前端播放m3u8格式视频
一.前端播放m3u8格式视频 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta chars ...
- vue中config/index.js:配置的详细理解
当我们需要和后台分离部署的时候,必须配置config/index.js: 用vue-cli 自动构建的目录里面 (环境变量及其基本变量的配置) var path = require('path') ...
- vue中使用raphael.js实现地图绘制
一.效果图 二.在vue中引入raphael.js npm i raphael -S 三.封装一个名为StreetMap的组件,代码如下 <template> <div> &l ...
随机推荐
- 两种方式实现浅拷贝 for in实现和Object.assign({}, 对象1, 对象2);
浅拷贝只拷贝对象的一层,如果对象的属性还是对象,那么user3和user4这两个对象对应的值都会发生改变 // 拷贝分为浅拷贝和深拷贝. // 浅拷贝的实现 通过for in实现 var user1 ...
- 201871010101-陈来弟《面向对象程序设计(JAVA)》 第13周学习总结
201871010101-陈来弟<面向对象程序设计(JAVA)> 第13周学习总结 实验十一 图形界面事件处理技术 实验时间 2019-11-22 第一部分:理论知识 一.事件处理 1.事 ...
- 【Oracle】Windows启动
cd D:\app\Administrator\product\\dbhome_1\BIN D: sqlplus /nolog conn sys/system as sysdba startup pf ...
- ipc.Client: Retrying connect to server: .../10.0.0.27:10020. Already tried 6 time(s); retry policy is RetryUpToMaximumCountWithFixedSleep(maxRetries=10, sleepTime=1 SECONDS)
运行 时候爆出这个错 Exception in thread "main" java.io.IOException: java.net.ConnectException: Call ...
- VIJOS-P1450 包裹快递
洛谷 P1542 包裹快递 https://www.luogu.org/problem/P1542 JDOJ 1527: VIJOS-P1450 包裹快递 https://neooj.com/oldo ...
- 【oracle】11g服务器安装详细步骤
以下是百度经验:https://jingyan.baidu.com/article/363872eccfb9266e4aa16f5d.html 1.同时解压 2.setup 3.
- java 深入理解jvm内存模型 jvm学习笔记
jvm内存模型 这是java堆和方法区内存模型 参考:https://www.cnblogs.com/honey01/p/9475726.html Java 中的堆也是 GC 收集垃圾的主要区域.GC ...
- ASP.NET Core Windows 环境配置
ASP.NET Core 是对 ASP.NET 有重大意义的一次重新设计.本章节我们将介绍 ASP.NET Core 中的一些新的概念和它们是如何帮助我们开发现代化的 Web 应用程序 尽管 ASP. ...
- linux数据库中使用MD5加密
MD5加密算法源码下载:https://pan.baidu.com/s/1nwyN0xV 下载完成了之后解压,得到两个文件 环境搭建: 1.把md5.h文件拷贝到/usr/include/目录下 su ...
- [LeetCode] 743. Network Delay Time 网络延迟时间
There are N network nodes, labelled 1 to N. Given times, a list of travel times as directededges tim ...