两者皆为轻应用的实现
1.下载

// 萤石云 
"ezuikit-js": "^0.3.0",
// 乐橙云 现无npm下载 到乐橙云官网下载相关内容 vue项目可找技术支持拿demo

2.引入

// 萤石云
import  EZUIKit from 'ezuikit-js'; 
// 乐橙云 public-->index.html下引入
<script src="/imouplayer.js"></script>

3.使用

// new乐橙云视频对象
export const newImouPlayer = ({ id,url , kitToken, height=380, autoplay=false }) => {
  // 添加DOM容器
  let player = new ImouPlayer(id);
  // 播放器初始化
  player.setup({
    src: [{
        url,
        kitToken
    }], // 播放地址
    poster: '', // 封面图url
    autoplay: play,
    controls, // 是否展示控制栏
    height
  });
  return player
}
// new萤石云视频对象
import  EZUIKit from 'ezuikit-js'; // 萤石云
export const newEZUIKitPlayer = ({id, accessToken, url, template='simple', height='360 ', width='100%', autoplay=false}) => {
  return  new EZUIKit.EZUIKitPlayer({
    autoplay,
    id,
    accessToken,
    url,
    template, // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
    audio: 1, // 是否默认开启声音 0 - 关闭 1 - 开启
    height,
    width
  });
}
 methods: {
    videoclick(e,id,item) {
      this.playerList[id].play() // 点击播放
      e.target.style.display = "none" // 图标隐藏
    },
    // 点击历史回放默认先显示当前时间预览 选择时间后再回放历史录像
    clickHistory (item) {
      this.historyTime = '' // 再次点击时间置空
      this.current = item
      this.open = true
      setTimeout(()=>{
        // 视频对象存在并且 上次此次都是萤石云视频  切换地址播放
        if (this.playerHistory!=null & this.oldItem.apiType == 2 & item.apiType == 2) {
          this.playerHistory.stop().then(()=>{
            this.playerHistory.play(this.current.liveUrl);
          });
          return
        }
        // 萤石云视频没有销毁事件 导致萤石云切换到大华时 萤石云视频还占位 所以需要把萤石云视频暂停播放并隐藏
        if(this.playerHistory!=null & this.oldItem.apiType == 2 & item.apiType == 1) {
          const el = document.querySelector('#EZUIKitPlayer-playerHistory')
          this.playerHistory.stop()
          el.style.display = 'none'
        }
        // 创建新的视频对象
        if(item.apiType == 1) {
          this.playerHistory = newImouPlayer({
            id: `#playerHistory`,
            url:`imou://open.lechange.com/${item.deviceSn}/${item.channelId}/1?streamId=1`,
            kitToken: item.kitToken,
            autoplay: true
          })
        }else if(item.apiType == 2){
          this.playerHistory = newEZUIKitPlayer({
            id: `playerHistory`,
            accessToken: item.accessToken,
            url: item.liveUrl,
            autoplay: true
          })
        }
        this.oldItem = item
      },500)
    },
    handleClose() {
      this.open = false
      this.current.apiType == 1 ? this.playerHistory.destroy() : this.playerHistory.stop()// 销毁视频对象
    },
    // 选择时间
    historyChange(date) {
      let startTime = formatDay(new Date()) + ' ' + date[0]
      let stopTime = formatDay(new Date()) + ' ' + date[1]
      setTimeout(async ()=>{
        if(this.current.apiType == 1) {
          // 清除上一次
          if (this.playerHistory) { this.playerHistory.destroy() }
          this.playerHistory = newImouPlayer({
            id: `#playerHistory`,
            url: `imou://open.lechange.com/${this.current.deviceSn}/${this.current.channelId}/2?streamId=1&recordType=localRecord&beginTime=${startTime}&endTime=${stopTime}`,
            kitToken: this.current.kitToken
          })
        }else if(this.current.apiType == 2){
          const { data } = await getPlayBack({
            deviceSn: this.current.deviceSn,
            channelId: this.current.channelId,
            startTime,
            stopTime
          })
          // 替换播放地址
          this.playerHistory.stop().then(()=>{
            this.playerHistory.play({
              url: data.liveUrl,
              accessToken: data.accessToken
            });
          });
        }
      },500)
    },
    async getVideoList() {
      const { data } = await getVideoList({projectId: this.projectId})
      this.videoList = data
      setTimeout(()=>{
        data.forEach(item => {
          if(item.apiType == 1) {// 1：乐橙云 2：萤石云
            // 把设备列表new出来的视频对象存到一起
            this.playerList[`player${item.deviceSn + item.channelId}`] = newImouPlayer({
              id: `#player${item.deviceSn + item.channelId}`,
              url: `imou://open.lechange.com/${item.deviceSn}/${item.channelId}/1?streamId=1`,
              kitToken: item.kitToken
            })
          }else if(item.apiType == 2){
            this.playerList[`player${item.deviceSn + item.channelId}`] = newEZUIKitPlayer({
              id: `player${item.deviceSn + item.channelId}`,
              accessToken: item.accessToken,
              url: item.liveUrl,
            })
          }
        })
      }, 500)
    },
  },