vue2使用ezuikit播放在线视频，支持hls.m3u8

最新推荐文章于 2024-05-17 17:18:12 发布

Uxiao7

最新推荐文章于 2024-05-17 17:18:12 发布

阅读量971

点赞数 7

文章标签：前端 javascript

本文链接：https://blog.csdn.net/Uxiao7/article/details/135251142

版权

1.vue中的html引入ezuikit

    <script type="text/javascript" src="./ezuikit.js"></script>

2.使用

    <video
              id="myPlayers"
              autoplay
              controls
              style="width:100%;height:100%; object-fit: fill"
            ></video>

   //调用方法
   //视频
    videoOpen() {
      const that = this;
      setTimeout(() => {
        try {
          if (!that.previewUrl) {
            throw new Error("视频预览 URL 不存在或未定义。");
          }
          const ezopenUrl =
            "ezopen://" + that.previewUrl.replace(/\.m3u8$/, "");

          const playerElement = document.getElementById("myPlayers");
          if (!playerElement) {
            throw new Error("无法找到与 ID 'myPlayer' 相对应的元素。");
          }
          // 使用正确的视频 URL 格式创建 EZUIKitPlayer 实例
          that.player = new EZUIKit.HLS("myPlayers", that.previewUrl);
        } catch (error) {
          console.error("初始化 EZUIKitPlayer 时出错:", error);
          // 处理错误或记录其他信息
        }
      }, 200);
    },
    //关闭视频流
    handleClose() {
      if (this.player) {
        this.player.stop(); //关闭视频流
      }
      this.previewUrl=null;
    },