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

最新推荐文章于 2024-01-18 14:29:11 发布

努力中的小曾

最新推荐文章于 2024-01-18 14:29:11 发布

阅读量5.5k

点赞数

分类专栏：播放文章标签： vue javascript 视频处理

本文链接：https://blog.csdn.net/bazcsx/article/details/121392515

版权

播放专栏收录该内容

4 篇文章 0 订阅

订阅专栏

乐橙云（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目前没有此插件的构建。

努力中的小曾

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
20
评论
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*****', // 播放Toke
复制链接

扫一扫