参考文档：文档概述 · 萤石开放平台API文档

1.安装依赖

npm i ezuikit-js

2.封装组件

src/components/PlayerVideo/index.vue

<template>
	<div id="video-container" style="width: 100%;"></div>
</template>
<script lang="ts">
import { reactive, getCurrentInstance, toRefs, onMounted, nextTick, defineComponent } from 'vue';
import EZUIKit from 'ezuikit-js';

var player = null as any;
export default defineComponent({
	name: 'PlayerVideo',
	props: {
		accessToken: String,
		play_url: String,
	},
	setup(props: any, { emit }: any) {
		var themeData = {
			"header": {
				"color": "#1890ff",
				"activeColor": "#FFFFFF",
				"backgroundColor": "#000000",
				"btnList": [
					{
						"iconId": "deviceID",
						"part": "left",
						"defaultActive": 0,
						"memo": "顶部设备序列号",
						"isrender": 1
					},
					{
						"iconId": "deviceName",
						"part": "left",
						"defaultActive": 0,
						"memo": "顶部设备名称",
						"isrender": 1
					},
					{
						"iconId": "cloudRec",
						"part": "right",
						"defaultActive": 0,
						"memo": "云存储",
						"isrender": 0
					},
					{
						"iconId": "rec",
						"part": "right",
						"defaultActive": 0,
						"memo": "SD卡回放",
						"isrender": 0
					}
				]
			},
			"footer": {
				"color": "#FFFFFF",
				"activeColor": "#1890FF",
				"backgroundColor": "#00000021",
				"btnList": [
					{
						"iconId": "play",
						"part": "left",
						"defaultActive": 1,
						"memo": "播放",
						"isrender": 1
					},
					{
						"iconId": "capturePicture",
						"part": "left",
						"defaultActive": 0,
						"memo": "截屏按钮",
						"isrender": 1
					},
					{
						"iconId": "sound",
						"part": "left",
						"defaultActive": 0,
						"memo": "声音按钮",
						"isrender": 1
					},
					{
						"iconId": "pantile",
						"part": "left",
						"defaultActive": 0,
						"memo": "云台控制按钮",
						"isrender": 1
					},
					{
						"iconId": "recordvideo",
						"part": "left",
						"defaultActive": 0,
						"memo": "录制按钮",
						"isrender": 1
					},
					{
						"iconId": "talk",
						"part": "left",
						"defaultActive": 0,
						"memo": "对讲按钮",
						"isrender": 1
					},
					{
						"iconId": "zoom",
						"part": "left",
						"defaultActive": 0,
						"memo": "电子放大",
						"isrender": 1
					},
					{
						"iconId": "hd",
						"part": "right",
						"defaultActive": 0,
						"memo": "清晰度切换按钮",
						"isrender": 1
					},
					{
						"iconId": "webExpend",
						"part": "right",
						"defaultActive": 0,
						"memo": "网页全屏按钮",
						"isrender": 1
					},
					{
						"iconId": "expend",
						"part": "right",
						"defaultActive": 0,
						"memo": "全局全屏按钮",
						"isrender": 1
					}
				]
			}
		};

		onMounted(() => {
			nextTick(() => {
				initPlayer()
			});
		});

		const { proxy } = getCurrentInstance() as any;
		const data = reactive({
		});

		const initPlayer = async () => {
				player = new EZUIKit.EZUIKitPlayer({
					id: 'video-container', // 视频容器ID
					// accessToken: "at.67jjm3xg1nqavrv3ch6wuhgl3hjzwvly-6t6ynn896j-0ronkpk-ci0ef9om3",
					// url: "ezopen://open.ys7.com/FA6803244/1.hd.live",
				    accessToken: props.accessToken,
			       	url: props.play_url,
					// simple - 极简版; pcLive-pc直播；pcRec-pc回放；	mobileLive-移动端直播；mobileRec-移动端回放;security - 安防版;voice-语音版;
					themeData: themeData,
				})
		}

		const destroyPlayer = () => {
			if (player) {
				player.stop();
				player.destroy();
				player = null;
			}
		}

		return { ...toRefs(data), destroyPlayer }
	}
})
</script>
<style scoped lang="scss"></style>

3.页面调用

<template>
	<div class="layout-padding">
		<div class="layout-padding-view layout-padding-auto">
			<div class="surveillanceVideo">
				<PlayerVideo v-if="play_url && accessToken" :play_url="play_url" :accessToken="accessToken"
					ref="playerVideoRef">
				</PlayerVideo>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { toRefs, reactive, onMounted, defineComponent, getCurrentInstance, onDeactivated, onActivated, onBeforeUnmount, } from 'vue';
import PlayerVideo from '/@/components/PlayerVideo/index.vue';
export default defineComponent({
	components: {
		PlayerVideo
	},
	setup() {
		const data = reactive({
			play_url: "",
			accessToken: "",
		});

		// 页面加载时
		onMounted(async () => {
			console.log("onMounted");
			initPlayer()
		});

		onBeforeUnmount(() => {
			console.log("onBeforeUnmount");
			destroyPlayer()
		})

		onActivated(() => {
			console.log("onActivated");
			initPlayer()
		})
		onDeactivated(() => {
			console.log("onDeactivated");
			destroyPlayer()
		})

		const { proxy }: any = getCurrentInstance();

		const initPlayer = async () => {
			let res = await proxy.apis.v2DevicesGetdetail({
				deviceid: "FA6803244",
			});
			if (res.code === 200) {
				data.play_url = res.data.play_url
				data.accessToken = res.data.accessToken
			} else {
				proxy.$message({
					message: res.message,
					type: 'error',
				});
			}
		};

		const destroyPlayer = () => {
			proxy.$refs?.playerVideoRef?.destroyPlayer()
		}

		return {
			...toRefs(data),
		};
	},
});
</script>

<style  lang="scss" scoped>
.surveillanceVideo {
	width: 600px;
	height: 400px;
}
</style>

4.效果图