m3u8視訊網站注入多線程下載下傳播放

vue+ajax+videojs 解決網站下載下傳緩慢，通過油猴注入網頁。支援+-号進行快進

預覽所有下載下傳的ts碎片，可感覺錯誤内容，提前規避

原生videojs内容，支援後續自主擴充。

特色：

跳過錯誤片段内容【判斷video.waiting事件是否停留超1s】

提示資訊換成 浮窗【引入element-ui的 js和css，再使用$message】

<!-- 引入元件庫 -->
 <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入樣式 -->
<link
rel="stylesheet"
href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
/>
   this.$message.error("請輸傳入連結接");           

需要cookie登入

遇到跨域cors 問題

直接注入内容到對應網址

通過 直接加載m3u8傳回的内容

// 根據m3u8内容擷取線上檔案
        getM3U8ByContent() {
          if (!this.m3content) {
            this.$message.error("請輸入m3u8内容");
            return;
          }
          if (this.downloading) {
            this.$message.error("資源下載下傳中，請稍後");
            return;
          }
          this.initConfig();
          this.tips = "m3u8 檔案下載下傳中，請稍後";
          this.beginTime = new Date();

          this.tsUrlList = [];
          this.finishList = [];
          m3u8Str = this.m3content;
          // 提取 ts 視訊片段位址
          let infoPerIndex = 0;
          m3u8Str.split(" ").forEach((item) => {
            // if (/.(png|image|ts|jpg|mp4|jpeg)/.test(item)) {
            if (/^[^#]/.test(item)) {
              this.tsUrlList.push(this.applyURL(item, this.url));
              this.finishList.push({
                title: item,
                status: "",
                timeStart: this.formatSeconds(this.durationSecond),
                timestap: this.durationSecond,
              });
            }
            if (item.toUpperCase().indexOf("#EXTINF:") > -1) {
              // 計算視訊總時長，設定 mp4 資訊時使用
              infoPerIndex++;

              this.durationSecond += parseFloat(item.split("#EXTINF:")[1]);
            }
          });

          
        },