前端Vue实现萤石云播放视频

下载依赖

复制代码
npm install ezuikit-js --save

完整代码

html 复制代码
<template>
  <div class="home">
    <div id="video-container"></div>
  </div>
</template>
<script>
import EZUIKit from "ezuikit-js";

export default {
  name: "home",
  data() {
    return {
      ezvizPlay: null,
    };
  },
  components: {},
  props: {},
  watch: {},
  computed: {},
  mounted() {
    this.$nextTick(()=>{
      this.initVideo()
    })
  },
  methods: {
    initVideo(){
      if (this.ezvizPlay !== null) {
        return;
      }
      //获取萤石token
      this.ezvizPlay = new EZUIKit.EZUIKitPlayer({
        autoplay: true,  // 默认播放
        //视频播放包裹元素
        id: "video-container",
        //萤石token
        accessToken:"----",
        // ezopen://open.ys7.com/${设备序列号}/{通道号}.live
        url: "ezopen://------.live", // 播放地址
        template: "simple", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版;
        // header: ['capturePicture', 'zoom'], // 如果templete参数不为simple,该字段将被覆盖
        plugin: ['talk'], // 加载插件,talk-对讲
        // 视频下方底部控件
        // footer: ["talk", "broadcast", "hd", "fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        footer: ['talk', 'hd', 'fullScreen'], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        width: 800,//元素宽度
        height: 600,//视频元素高度
      })
    },
  }
};
</script>
<style lang="scss" scoped>
</style>

相关网址
官方文档
最新代码和demo

相关推荐
芬兰y10 分钟前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁17 分钟前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry17 分钟前
Fetch 笔记
前端·javascript
拾光拾趣录18 分钟前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟19 分钟前
vue3,你看setup设计详解,也是个人才
前端
Lefan23 分钟前
一文了解什么是Dart
前端·flutter·dart
Patrick_Wilson28 分钟前
青苔漫染待客迟
前端·设计模式·架构
vvilkim30 分钟前
Nuxt.js 全面测试指南:从单元测试到E2E测试
开发语言·javascript·ecmascript
写不出来就跑路1 小时前
基于 Vue 3 的智能聊天界面实现:从 UI 到流式响应全解析
前端·vue.js·ui
OpenTiny社区1 小时前
盘点字体性能优化方案
前端·javascript