萤石直播以及回放的接入和销毁-Toy模板网

这篇具有很好参考价值的文章主要介绍了萤石直播以及回放的接入和销毁。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

以下基于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、销毁文章来源地址https://www.toymoban.com/news/detail-648876.html

    //完全关闭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> 元素
    },

到了这里，关于萤石直播以及回放的接入和销毁的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！