一、前情提要

1. 作用

2. 准备一

3. 准备二

二、使用

1. 安装依赖

2. 页面引入

3. 代码

html

4. 效果

5. 所遇问题

6. 测试地址

一、前情提要

1. 作用

作用 : 使用hls.js拉流播放m3u8格式

2. 准备一

如果需要连接现场的局域网，可以先使用EasyConnect连接VPN，使用设备所在的内网

网址 : EasyConnect.rar - CSDN下载

3. 准备二

使用VLC先测试视频流是否存在问题

网址 : VLCplay.rar - CSDN下载

二、使用

1. 安装依赖

npm install hls.js

2. 页面引入

import hlsjs from 'hls.js'

3. 代码

html

<template><div class="playVideo-layout"><!-- 播放器 --><div id="app-container" class="video-box"><videoref="videoElement":src="videoUrl"id="videoElement"controlsmutedstyle="width: 100%; height: 100%; object-fit: fill"></video></div></div>
</template>

js

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: {},
};

4. 效果

5. 所遇问题

如果vlc能播放，网页上却播放不了，有可能以下问题 :

确认地址是否拼接有误
查看连接的端口是否连通
由于部分浏览器不支持视频压缩技术
- 因此如果前端设备是H2645编码的话，需要改为H264编码 => 这个很可能出错

6. 测试地址

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

Vue 之视频流 - Hls.js相关推荐

Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录学习链接 hls.js播放m3u8视频效果代码前端代码安装hls.js App.vue 后台代码准备文件 mp4文件切片java实现 TsController TsService ...
Windows上搭建rtsp-simple-server流媒体服务器实现rtsp、rtmp等推流以及转流、前端html与Vue中播放hls(m3u8)视频流
场景 Nginx-http-flv-module流媒体服务器搭建+模拟推流+flv.js在前端html和Vue中播放HTTP-FLV视频流: Nginx-http-flv-module流媒体服务器搭建 ...
vue + hls.js直播
1.安装hls.js依赖通过npm安装依赖 npm install hls.js --save 2.代码实现有几个需要注意的地方初始化函数需要在页面加载完之后执行,所以可以看到loadVideo ...
使用hls.js播放m3u8视频流
1.安装hls.js npm install hls.js -S 2.使用 <template><div class="video_con"><vid ...
vue整合视频流教程
vue整合视频流教程业务需求:客户需要将监控接入到自己的app中,在市面上很多监控是不分享视频流地址的,推荐方案选择海康,大华等品牌的监控,获取到监控地址整合到自己的app中. 在开发前需要普及的一 ...
uniapp项目引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频文件，文末有项目代码可供下载
1.下载依赖 npm i dplayer -S npm i hls.js -S 2.vue页面 <template><view class="content"&g ...
hls.js播放hls直播源
https://blog.csdn.net/qq_40816360/article/details/84074405 https://www.cnblogs.com/troublehuan/p/120 ...
vue 动态路由_Vue.js应用性能优化三
在上一篇Vue.js应用性能优化二中,我们学习了足够强大的模式,可以显着提高应用程序的性能 - 按照路由分割代码.虽然按照路由拆分代码非常有用,但在用户访问我们的站点后,仍然有很多内部代码不需要.在本 ...
vue js 定义对象_JS标准内置对象Proxy及Vue中的proxy.js文件
昔登铜井望法华,葱茏螺黛浮蒹葭.今登法华望铜井,湖水迷茫烟色瞑.-- <登法华寺山顶> Proxy是什么 Proxy是JS标准内置对象中的一个对象.用于创建一个对象的代理.从而实现对对象操 ...

Vue 之视频流 - Hls.js

一、前情提要

1. 作用

2. 准备一

3. 准备二

二、使用

1. 安装依赖

2. 页面引入

3. 代码

html

js

4. 效果

5. 所遇问题

6. 测试地址

Vue 之视频流 - Hls.js相关推荐

最新文章

热门文章

Vue 之 视频流 - Hls.js

一、前情提要

1. 作用

2. 准备一

3. 准备二

二、使用

1. 安装依赖

2. 页面引入

3. 代码

html

js

4. 效果

5. 所遇问题

6. 测试地址

Vue 之 视频流 - Hls.js相关推荐

最新文章

热门文章

Vue 之视频流 - Hls.js

Vue 之视频流 - Hls.js相关推荐