(俺的资源列表有EasyConnect)
(俺的资源列表有VLC)
? 01-下载hls.js? ??
npm install hls.js
yarn add hls.js
?02-在页面进行引入
import hlsjs from 'hls.js'
03-编写html部分代码
<template>
<div class="playVideo-layout">
<!-- 播放器 -->
<div id="app-container" class="video-box">
<video
ref="videoElement"
:src="videoUrl"
id="videoElement"
controls
muted
style="width: 100%; height: 100%; object-fit: fill"
></video>
</div>
</div>
</template>
04-编写js代码?
//播放
show() {
this.video = this.$refs.videoElement; //定义挂载点
console.log(this.video);
if (hlsjs.isSupported()) {
this.hlsjs = new hlsjs();
this.hlsjs.loadSource(
"这里书写路径地址 例:http://192.168.1.1/live/abc.m3u8"
);
this.hlsjs.attachMedia(this.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");
}
},
1.确认地址是否拼接有误
2.查看连接的端口是否连通
3.由于部分浏览器不支持视频压缩技术,因此如果前端设备是H2645编码的话,需要改为H264编码? ? ?这个很可能出错
?
1.有时候,那些清晨时最坚强的人,正是那些夜里哭着哭着睡着的人。 2.总有一个...
第二题 2021年4月4日 腾讯笔试编程题第二题 描述 给出一个有0-9的数字组成的字符...
本文介绍了JSP编程技术实现一个简单的购物车程序,具体如下: 1 问题描述 利用JS...
XML/HTML Code 复制内容到剪贴板 input id = username name = username type = t...
Coonamd 对象定义了将对数据源执行的命令,可以用于查询数据库表并返回一个记录...
作者个人研发的在高并发场景下,提供的简单、稳定、可扩展的延迟消息队列框架,...
当我们学习surface命令时,已经看到了三维作图的一些端倪。在matlab中我么可以调...
ASP.Net Core的跨域设置比较简单 官方都整合了 具体的参见微软官方文档: https:...
由于工作所需,最近花时间研究了html转换为pdf的功能。html转换为pdf的关键技术...
常见信号介绍 SIGINT 2 CtrlC时OS送给前台进程组中每个进程 SIGABRT 6 调用abort...