Thingjs嵌入视频hls.js+m3u8格式

thingjs在使用外部资源时，需要复制第三方资源代码到该平台，在嵌入视频之前需要引入hls.jsjs资源代码下载
hls.js支持处理m3u8格式，m8u3在线解析器
正题来了，贴代码贴代码（~~）

THING.Utils.dynamicLoad([
// 将hls.js文件复制到自己的项目中，再引入
‘/自己的项目路径/hls.js’
],
function () {
// 加载场景后执行
app.on(‘load’, function (ev) {
new THING.widget.Button(‘监控’, () => {
// 找的场景中的摄像头
let monitor = app.query("[物体类型=摄像头]")[0]
// 调用摄像头封装类
new VideoCamera(monitor)
});
});
// 摄像头封装类-绘制标牌
function VideoCamera(obj) {
this.obj = obj;
var that = this; this.marker = app.create({
type: “Marker”,
offset: [0, 0.5, 0],
size: 3,
url: “https://www.thingjs.com/static/images/sliohouse/videocamera3.png”,
parent: obj,
keepSize: true // 设置图标始终保持像素大小
});
// 点击标牌弹出视频
this.marker.on(‘click’, function () {
that.showVideoFrame();
});
}
// 显示视频类
VideoCamera.prototype.showVideoFrame = function () {
// 判断是否已存在
var mon = document.getElementById(‘monitor’);
if (mon) {
mon.remove()
}
// 使用UI布局外观
var template =
<div id="monitor" style='border: 1px white solid;width:450px;height:300px;position:absolute;bottom:0px;margin: 0px 20px;padding: 0px 20px;background: rgba(16, 28, 46, .3);'> <video id="video" style="width:100%;height:100%;"></video> <div id="heddin"> <span id="close">×</span> </div> <div id="heddinEnlarge"> <span id="closeEnlarge">+</span> </div> <div id="heddinNarrow"> <span id="closeNarrow">-</span> </div> <div style="position:absolute;top: 145px;left: 225px;"> <img id="img" src='加载效果图（阿里巴巴图库下载）'/> </div> </div>;
$(function () {
// 图片加载效果
var angle = 0;
var time = setInterval(function () {
angle += 30;
$("#img").css({ ‘transform’: ‘rotate(’ + angle + ‘deg)’ });
}, 100);
// 创建视频
if (Hls.isSupported()) {
var video = document.getElementById(‘video’);
var hls = new Hls();
hls.loadSource(‘自己的https协议m8u3格式视频路径’);
hls.attachMedia(video);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
video.play();
// 关闭按钮样式设置
var heddinCss = {
cursor: ‘pointer’,
position: ‘absolute’,
top: ‘0px’,
right: ‘0px’,
backgroundColor: ‘#3F6781’,
width: ‘12px’,
height: “12px”,
border: ‘3px solid #eee’,
borderRadius: ’ 50%’,
}
var closeCss = {
cursor: ‘pointer’,
position: ‘absolute’,
top: ‘-5px’,
color: ‘white’,
}
// 关闭按钮
$("#heddin").css(heddinCss)
$("#close").css(closeCss)
// 放大按钮样式设置
var heddinCss = {
cursor: ‘pointer’,
position: ‘absolute’,
top: ‘25px’,
right: ‘0px’,
backgroundColor: ‘#3F6781’,
width: ‘12px’,
height: “12px”,
border: ‘3px solid #eee’,
borderRadius: ’ 50%’,
}
var closeCss = {
cursor: ‘pointer’,
position: ‘absolute’,
top: ‘-5px’,
color: ‘white’,
}
// 放大按钮
$("#heddinEnlarge").css(heddinCss)
$("#closeEnlarge").css(closeCss)
// 缩小按钮样式设置
var heddinCss = {
cursor: ‘pointer’,
position: ‘absolute’,
top: ‘50px’,
right: ‘0px’,
backgroundColor: ‘#3F6781’,
width: ‘12px’,
height: “12px”,
border: ‘3px solid #eee’,
borderRadius: ’ 50%’,
}
var closeCss = {
cursor: ‘pointer’,
position: ‘absolute’,
top: ‘-6px’,
left: ‘3px’,
color: ‘white’,
}
// 缩小按钮
$("#heddinNarrow").css(heddinCss)
$("#closeNarrow").css(closeCss)
// 隐藏图片
clearInterval(time);
$("#img").css({ ‘display’: ‘none’ });
});
}
// 关闭事件
$("#heddin").click(function () {
$("#monitor").remove()
})
// 放大事件
$("#heddinEnlarge").click(function () {
$("#monitor").css(“width”, “96%”)
$("#monitor").css(“height”, “90%”)
})
// 缩小事件
$("#heddinNarrow").click(function () {
$("#monitor").css(“width”, “450px”)
$("#monitor").css(“height”, “300px”)
})
})
// 插入到 ThingJS 内置的 2D 界面 div 中
$(’#div2d’).append((钱的英文符号)(template));
})

Thingjs嵌入视频hls.js+m3u8格式相关推荐

vue使用vue-video-player实现web视频直播展示m3u8格式
最近有一个需求,就是web展示摄像头的实时画面,mentor让我先探索探索,所以我先测试一些小demo. 这里边个人想了一下啊,还是比较复杂的,包含推流和拉流等操作,还有延迟的问题要解决. 自己主要负 ...
FFmpeg 视频转码m3u8格式使用基本方法
首先了解一下为什么使用m3u8格式, 一般我们视频格式都是MP4 或者AVI 但是在使用播放器播放时候需要考虑 mp4的关键帧元素往往很大,需要加载很长时间才能开始播放,网速不好的情况缓冲加载时间过长 ...
HLS中m3u8格式规范解读
权威的itef官方文档参见: https://datatracker.ietf.org/doc/draft-pantos-http-live-streaming/ 另外参见苹果官方文档 https:/ ...
Video 标签播放 m3u8 格式视频
在不借助流媒体播放器的前提下,直接播放 m3u8 格式的视频文件更多精彩更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线写在前面的话为什么要播放 m3u8 格式的视频对于一 ...
python视频转化_python实现m3u8格式转换为mp4视频格式
开发动机:最近用手机QQ浏览器下载了一些视频,视频越来越多,占用了手机内存,于是想把下载的视频传到电脑上保存,可后来发现这些视频都是m3u8格式的,且这个格式的视频都切成了碎片,存在电脑里不方便查看, ...
m3u8转换到mp4 python_python实现m3u8格式转换为mp4视频格式
开发动机:最近用手机QQ浏览器下载了一些视频,视频越来越多,占用了手机内存,于是想把下载的视频传到电脑上保存,可后来发现这些视频都是m3u8格式的,且这个格式的视频都切成了碎片,存在电脑里不方便查看, ...
Hls.js播放m3u8视频 DPlayer视频播放器（easypan） MSE简介
文章目录学习链接 hls.js播放m3u8视频效果代码前端代码安装hls.js App.vue 后台代码准备文件 mp4文件切片java实现 TsController TsService ...
uniapp项目引入Dplayer.js以及hls.js用来解析播放m3u8直播流视频文件，文末有项目代码可供下载
1.下载依赖 npm i dplayer -S npm i hls.js -S 2.vue页面 <template><view class="content"&g ...
视频直播--使用chimee-player.browser.js 直播 m3u8格式视频
视频直播–使用chimee-player.browser.js 直播 m3u8格式视频亲测直接复制html 可播放采用hls 解析 <!DOCTYPE html> <html&g ...

Thingjs嵌入视频hls.js+m3u8格式

Thingjs嵌入视频hls.js+m3u8格式相关推荐

最新文章

热门文章