当前位置：首页 > news >正文

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

news 2025/8/8 7:21:10

需求：现在提供萤石云的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，主要区别在于硬解能力：

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

npm install ezuikit-js

然后这是我的页面：

<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 {//萤石云提供的accessTokenaccessToken: "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字段：

		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文档