JavaWeb整合萤石云（一），VUE和小程序也适用

本文链接：https://blog.csdn.net/qq_34565436/article/details/124143682

项目中需要接入一些视频，如果用自己的流媒体服务工作量很大，于是接入到萤石云上，支持直播回放等

准备工作

注册账号萤石开官网，登录萤石云的官网萤石开放平台下载所需的SDK

解压后有三个文件夹

如果使用HTML，可参考demos => base-demo

如果使用react，可参考demos => react-demo

如果使用vue，可参考demos => vue-demo

基本使用

html的方式

<script src="./ezuikit.js"></script>

vue

安装 ezuikit-js

$ npm install ezuikit-js

引入 ezuikit-js

import  EZUIKit from 'ezuikit-js';

基本使用

创建DOM

<div id="video-container"></div>

初始化

var player = new EZUIKit.EZUIKitPlayer({
      id: 'video-container', // 视频容器ID
      accessToken: 'at.3bvmj4ycamlgdwgw1ig1jruma0wpohl6-48zifyb39c-13t5am6-yukyi86mz',
      url: 'ezopen://open.ys7.com/203751922/1.live',
    })

方法调用

示例：停止播放

  1. player.stop();

  2. player.stop()
  .then(()=>{
    console.log("执行播放成功后其他动作");
  });

示例：执行播放（自动播放为false,自定义触发播放/切换播放地址）

  player.play();
  // 切换播放地址场景（注意先执行stop方法停止上次取流）
  player.play({
   url: 'ezopen://open.ys7.com/203751922/1.rec?begin=202001000000&end=202001235959'
  });

切换地址播放（注意需要先执行stop方法停止上次取流）

  player.stop()
  .then(()=>{
    player.play('ezopen://open.ys7.com/{其他设备}/{其他通道}.live');
  });

  // 其他账号下设备
  
  player.stop()
  .then(()=>{
    player.play({url:'ezopen://open.ys7.com/{其他设备}/{其他通道}.live',accessToken: 'xxxx'});
  });

用了官网的地址，展示效果