以下基于vue項目
?
1.安裝
npm i?ezuikit-js2、導入
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> 元素},
