乐橙云（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: '', // 封面图url
autoplay: 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目前没有此插件的构建。