萤石直播以及回放的接入和销毁

以下基于vue项目

 

1.安装

npm i ezuikit-js

2、导入

main.js中

import EZUIKit from "ezuikit-js"; //导入萤石Vue.use(EZUIKit);

3、创建容器

    <div class="video"><div id="video-container"></div><!-- <iframe :src="url" width="100%" height="100%" style="border: none;" id="ysOpenDevice" allowfullscreen></iframe> --></div>

4、初始化直播

    // 初始化萤石视频 直播initVedio() {
//创建domconst videoParent = document.querySelector(".video"); // 获取具有 video 类的父级元素if (videoParent) {const videoContainer = document.createElement("div");videoContainer.id = "video-container";// 设置其他样式或属性videoParent.appendChild(videoContainer); // 将新的 <div> 元素添加到 videoParent 中}this.isLive = true;this.player = null;console.log("this.player1", this.player);var width = "700";var height = "427";const ezopenInit = async () => {try {this.player = new EZUIKit.EZUIKitPlayer({id: "video-container",width: width,height: height,template: "pcLive",url: this.videoUrl,// url示例: "ezopen://open.ys7.com/BA4294455/1.live",accessToken: this.videoToken// accessToken示例://   "at.3hnw0vnpdbgh65qn2i47d0ydc8rqobjw-73tgrx3vut-116gert-1h4hcumkx"});} catch (error) {this.$message.error("发生错误: " + error.msg); // 使用this.$message进行错误提示}};ezopenInit().catch(error => {this.$message.error("发生错误: " + error.msg);});console.log("this.player2", this.player);},

5、创建回放（本文中回放与上面的直播是单独的，要摸执行直播，要摸执行回访放）

 ezopenInit() {// 创建domconst videoParent = document.querySelector(".video"); // 获取具有 video 类的父级元素if (videoParent) {const videoContainer = document.createElement("div");videoContainer.id = "video-container";// 设置其他样式或属性videoParent.appendChild(videoContainer); // 将新的 <div> 元素添加到 videoParent 中}this.isLive = false;this.player = null;let index = this.videoUrl.lastIndexOf(".");let newurl = this.videoUrl.slice(0, index);this.videoUrl2 = newurl + ".rec";var width = "700";var height = "427";const ezopenInit = async () => {try {this.player = new EZUIKit.EZUIKitPlayer({id: "video-container",width: width,height: height,template: "pcRec",  url: this.videoUrl2,});} catch (error) {console.error("播放器初始化错误:", error);}};ezopenInit();}

6、销毁

    //完全关闭modalhandleAfterClose() {
//销毁创建的对象，防止出现关闭页面依旧有声音的情况if (this.player) {this.player.stop();this.player.destroy();this.player = null;}//将dom移除，下次创建视频对象在创建这个dom,防止第二次打开发现创建了两个视频document.getElementById("video-container").innerHTML = "";const videoContainer = document.getElementById("video-container");videoContainer? videoContainer.parentNode.removeChild(videoContainer): ""; // 从 DOM 中移除 <div> 元素},