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

以下基于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() {
//创建dom
      const 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() {
      // 创建dom
      const 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、销毁

    //完全关闭modal
    handleAfterClose() {
//销毁创建的对象，防止出现关闭页面依旧有声音的情况
      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> 元素
    },