使用萤石云播放视频及主题模版配置

需求：现在提供萤石云的accessToken和视频地址url，需要在h5页面进行播放。

萤石云官方文档地址：文档概述 · 萤石开放平台API文档

轻应用公UIKIT是萤石开放平台针对web/H5页面的视频接入，主要分为3个JS SDK：

1）ezopen JS SDK：基于萤石ezopen私有协议，对视频流进行加密，确保设备出流安全的JavaScript SDK，支持H265解码，提供两个版本，一个是标准版，一个是高性能PRO版

2）FLV JS SDK：基于HTTP-FLV标准流协议提供的 JavaScript SDK，支持H265视频编码

3）HLS JS SDK：基于HLS标准流协议提供的JavaScript SDK

其中UIKIT JS SDK有两个版本：UIKIT、UIKIT PRO，主要区别在于硬解能力：

首先我们需要在项目中下载萤石云依赖

javascript 复制代码

npm install ezuikit-js

然后这是我的页面：

javascript 复制代码

<template>
  <view class="content">
    <!-- 视频预览 -->
    <view class="content-header">
      <div id="video-container"></div>
    </view>
  </view>
</template>

<script>
import EZUIKit from "ezuikit-js"; // 使用 npm 安装的包

export default {
  data() {
    return {
      //萤石云提供的accessToken
      accessToken: "at.dilcorr75bdqnfve0j6ne1mx8onfesn-8adkpswgy0-16zpm9y-jtetgf2xx",
      //萤石云视频播放地址
      url: "ezopen://open.ys7.com/FQ975845/1.live"
    };
  },
  mounted() {
    new EZUIKit.EZUIKitPlayer({
      id: "video-container",
      accessToken: this.accessToken,
      url: url,
      autoplay: true,
      width: "100%",
      height: "100%",
    });
  }
};
</script>

<style lang="scss" scoped>
.content {
  height: 100%;
  background-color: #f3f6f9;

 .content-header {
   width: 750rpx;
   height: 425rpx;
   background: #000;
 
   ::v-deep #video-container {
     width: 750rpx;
     height: 425rpx;
 
     video {
       width: 100% !important;
       height: 100% !important;
       object-fit: cover;
     }
   }
 }

}

</style>

这就是最基础的用法，这样页面上就可以显示实时画面了，需要提供的参数就是accessToken和视频地址url ，后续还可以对视频进行主题模版配置。

模版配置就是需要添加对应的template字段：

javascript 复制代码

		onReady() {
			// uni-app 的 H5 在 DOM 渲染完成后执行
			this.$nextTick(() => {
				this.player = new EZUIKit.EZUIKitPlayer({
					id: "video-container",
					accessToken: this.accessToken,
					url: this.monitorUrl,
					autoplay: true,
					width: "100%",
					height: "100%",
					template:'205909733abd4be4a7d48a41e9f004e1'//自定义配置主题模版，需要在萤石云官网配置
				});
				
			});
		},

官方也提供了几种模版：文档概述 · 萤石开放平台API文档

然后也可以自己自定义主题模版，登录对应的萤石云账号进行配置：

WEB端和H5都可以进行对应的配置，

WEB端：

H5端：

这样就完成了萤石云视频的播放和主题模版的配置。