vue引入萤石云监控进行播放

下载萤石云Js文件地址

1,将下载的js文件引入vue项目中

或者

npm install ezuikit-js --save

我这里放在了static下

2,在需要播放的监控页面引入

 import EZUIPlayer from "../../static/js/ezuikit.js";

或者

import  EZUIKit from 'ezuikit-js';

3,js方法调用

 //调用函数mounted(){this.get()},get(){// 调用监控this.$nextTick(() => {//DOM标签的ID       //src 播放地址document.getElementById("myPlayer").src ="http://****/***/****.m3u8";var player = new EZUIPlayer("myPlayer");this.video = player;player.on("error", function () {console.log("error");});player.on("play", function () {console.log("play");});player.on("pause", function () {console.log("pause");});});}

4,HTML

      <div class="video_bg"><videoid="myPlayer"   //ID 可写成动态的 :id="`myplayer`+ ${index}"posterplaysinlinewebkit-playsinlineautoplay><sourcesrc="http://****/****/***.m3u8" //播放地址type="application/x-mpegURL"/></video></div>

5,css根据自己的需求进行调整

6,已完成,运行即可播放(效果图)

npm 下载方式引入方式

创建dom

<div id="video-container"></div>

写入数据

var player = new EZUIKit.EZUIKitPlayer({id: 'video-container', // 视频容器IDaccessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',url: 'ezopen://open.ys7.com/203751922/1.live',width:200,height:200,autoplay:true
})

还有其他api请参考官方文档
文档地址

vue引入萤石云监控进行播放相关推荐

vue 接入萤石云，实现监控、多窗口监控、转向、放大缩小等
准备资料:文档概述 · 萤石开放平台API文档 vue 萤石云视频监控对接_谭CV的博客-CSDN博客_萤石云vue 1.接入萤石云 npm i ezuikit npm i ezuikit-js@0. ...
Vue中实现海康威视监控的播放及云台控制
原创不易,如果觉得对你有所帮助,拜托点赞哦~~ ^_^ 最近在做一个Vue项目,其中一个需求,就是在页面中展示出海康威视的监控图像,并进行云台控制. 研究的过程还是有点儿痛苦的,这类技术文章数量不多, ...
萤石云视频平台播放地址获取demo
萤石云平台API 调用萤石云API都需要获取Token之后,带着Token获取平台内容请求接口方法 /**** 萤石云HTTP请求方法* @param url* @param entity* @re ...
vue接入萤石云_智能家居不香吗？萤石转型：或者臣妾做不到，或者费力不讨好...
作者|蒋杰升简称|单蒋让你们荡起就像有人说这个车「比较高级」一样,指不定在萤石看来,发布一个IOT平台这个姿势也「比较高级」. 于是说,萤石拟从智能家居向IOT开放转型这件事,越过传闻,实锤落地. ...
vue 引入萤石视频
1.官网下载js包 https://open.ys7.com/mobile/download.html 2.(把下载好的ezuikit.js js包)放进vue 的 static 下 3.在inde ...
vue项目接入视频监控系列-------播放器的选择
在智慧城市发展迅速的今天,视频监控接入web平台的需求似乎成了不可或缺和潮流.博主准备对自己开发视频监控项目的经历做个记录,整理成一个系列的文章. 在前端发展迅速的今天,h5的出现让在web平台实现无 ...
vue引入51la流量监控
main.js router.afterEach( ( to, from, next ) => {setTimeout(()=>{var _hmt = _hmt || [];(functi ...
前端React项目中实现萤石云ezuikit摄像头的播放与控制
最近要在react项目中使用萤石云提供的ezuikit库来接入萤石云摄像头,实现远程播放.控制移动.放大缩小等功能,首先百度搜类似的需求,搜不到,只能自己采坑,登萤石云官网,看对应文档. 一.登录萤石 ...
接入萤石云的踩坑问题
在引入萤石云的时候遇到好几个问题,给大家讲讲我怎么用的大家跟着我做,根据需求自己改动,应该都不会有什么问题环境 vue2 我做的监控模式模式不一样萤石云api需要传入的地址格式也是不一样的萤石云 ...
萤石云枪机球机云台接入控制实战-含源码-layui
标题最终效果图,下班后摄像头关闭了主要使用到的技术栈:layui,阿里图标库,layui内置jquery ,mui.min.js,ezuikit.js,萤石云开始用vedio.js来做,可以播放m ...

vue引入萤石云监控进行播放

vue引入萤石云监控进行播放

vue引入萤石云监控进行播放相关推荐

最新文章

热门文章