vue项目乐橙云（imouplayer.js）--轻应用直播SDK demo案例

乐橙云（imouplayer.js）

这边使用的是轻应用直播SDC

实现案例之前，前提我们有2个参数了

player.setup({src: [{url: 'imou://open.lechange.com/3C0338EPA****/0/1?streamId=1', // url拼接说明请见：2.2.3 轻应用播放地址说明kitToken: 'Kt_2297440199774b57ac1605*****', // 播放Token，通过接口getKitToken获取，具体请见：2.2.4 getKitToken接口协议说明}], // 播放地址});

下载乐橙云的插件，具体位置在url：乐橙云下载插件地址
创建vue项目，把刚刚下载好的创建放到public文件夹中，如图：

4.在index.html 引用imouplayer.js创建，不上图了，上图怕以后会丢失，还是上代码把

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1.0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title><%= htmlWebpackPlugin.options.title %></title></head><body><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="./imouplayer.js"></script><!--引入创建--><!-- built files will be auto injected --></body>
</html>

后面我是以组件形式生成，先看看结构（图片），然后直接上代码

lcy_video.vue组件代码为：

<template><div class="video"><div id="player"></div></div>
</template><script>
export default {name: 'lcy_video',mounted: function() {/* eslint-disable */// 添加DOM容器const player = new ImouPlayer('#player');// 播放器初始化player.setup({src: [{url: 'imou://open.lechange.com/3C0338EPAZ***/0/1?streamId=1', // url拼接说明请见：2.2.3 轻应用播放地址说明kitToken: 'Kt_2297440199774b57ac16054b******', // 播放Token，通过接口getKitToken获取，具体请见：2.2.4 getKitToken接口协议说明}], // 播放地址width: 760, // 播放器宽度height: 400, // 播放器高度poster: '', // 封面图urlautoplay: true,controls: true, // 是否展示控制栏});// 以下参数根据生命周期来使用...// // 播放// player.play();// // 暂停// player.pause();// // 停止播放// player.stop();// // 销毁播放器// player.destroy();// // 进入全屏// player.setFullScreen();// // 退出全屏// player.exitFullScreen();// // 设置音量（0-1）// player.setVolume(0);// // 设置多屏// player.setMultiScreen(1);},
}
</script><style scoped>
</style>

App.vue组件为：

<template><div id="app"><LvyVideo /></div>
</template><script>
import LvyVideo from './components/lcy_video.vue'export default {name: 'App',components: {LvyVideo}
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

具体测试视频是否正常使用官网的地址，如图：

然后最后面给自己提示一下，把以后回来还是会用到
7. 一个视频一个唯一的ID。
8. 这些案例问客服上都有。
9. 目前20211118 npm目前没有此插件的构建。

vue项目乐橙云（imouplayer.js）--轻应用直播SDK demo案例相关推荐

vue项目乐橙云（imouplayer.js）--轻应用直播SDK demo案例（保姆级）
vue项目乐橙云(imouplayer.js)--轻应用直播SDK demo测试案例(保姆级) 一.所用到的资源(参数) 1.appId (控制台-我的应用-应用信息中获取) 2.appSecret ...
vue项目乐橙云轻应用直播SDK imouplayer.js
官网案例:https://open.imoulife.com/book/light/sdk.html 文档: https://open.imou.com/developDoc/31 1,下载对应的资 ...
vue项目引入标签云动画js函数，不执行
vue项目引入标签云动画js函数,数据重新渲染了,但是动画不执行了 rollTagCloud() {/* 3D标签云滚动函数*/const timer = setTimeout(() => {t ...
后端乐橙云开放平台获取管理员token测试demo
乐橙云开放平台获取管理员token测试demo 前端页面文档 django配置测试代码前端页面文档 html <!DOCTYPE html> <html lang="e ...
vue项目使用百度云 cyberplayer.js插件方法
下载资源先: https://cloud.baidu.com/doc/Developer/index.html 点击上面的链接,然后滚动到底部,然后在这下载此sdk 解压以下文件出来放到public文 ...
vue项目使用乐橙云播放轻应用直播SDK imouplayer.js
乐橙云轻应用组件开发为什么使用乐橙云 ①幼教场景,提供视频实时预览,家长通过移动端app或微信轻应用远程实时观看孩子所在区域件: 实时视频预览支持高.标清切换,快速出流,播放无卡顿: ②食品安全场景 ...
ssm项目直接加html文件,如何把ssm项目和vue项目部署在云服务器（上）
如何把ssm项目和vue项目部署在云服务器(上) 如何把ssm项目和vue项目部署在云服务器(上) 一.引入 URL的概念理解在WWW上,每一信息资源都有统一的且在网上唯一的地址,该地址就叫URL( ...
Android端乐橙云SDK集成
乐橙云官网链接如下:https://open.imoulife.com/ Android端接入SDK链接如下:https://open.imoulife.com/book/opensdk/sdk/an ...
安防摄像头已分别接入乐橙云、萤石云，如何实现私有云平台的统一管理与向上级联？
一.背景分析科技创新对社会发展的重要性不言而喻.对于安防行业来说,人工智能和5G等新技术的应用,已经成为推动智能安防发展的一块关键踏板.从技术维度来看,人工智能.云计算.大数据.物联网等技术在安防视 ...

vue项目乐橙云（imouplayer.js）--轻应用直播SDK demo案例

乐橙云（imouplayer.js）

vue项目乐橙云（imouplayer.js）--轻应用直播SDK demo案例相关推荐

最新文章

热门文章

vue项目 乐橙云（imouplayer.js）--轻应用直播SDK demo案例

乐橙云（imouplayer.js）

vue项目 乐橙云（imouplayer.js）--轻应用直播SDK demo案例相关推荐

最新文章

热门文章

vue项目乐橙云（imouplayer.js）--轻应用直播SDK demo案例

vue项目乐橙云（imouplayer.js）--轻应用直播SDK demo案例相关推荐