章管理新增腾讯播放

src/components/videoPreview/index.vue

@@ -11,7 +11,7 @@
       <div slot="title" class="hearders">
         <div class="leftTitle">视频预览</div>
         <div class="rightBoxs">
-          <img src="@/assets/images/Close@2x.png" alt="" @click="clears" />
+          <img src="@/assets/images/Close@2x.png" alt @click="clears" />
         </div>
       </div>
       <div>
@@ -34,16 +34,18 @@ export default {
       vidzb: "",
       playerJs:
         "https://player.polyv.net/resp/live-h5-player/latest/liveplayer.min.js",
+      vodPlayerJsForTCPlayer:
+        "https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js",
       uidzb: "egsxlptzdq",
       fileSetting: {
         desc: "i am desc", // 描述
         cataid: "1639399775001", // 分类ID 可以后端传递 也可以不写 或写死
         tag: "i am tag", // 标签
         luping: 0, // 是否开启视频课件优化处理，对于上传录屏类视频清晰度有所优化：0为不开启，1为开启
-        keepsource: 1, // 是否源文件播放（不对视频进行编码）：0为编码，1为不编码
+        keepsource: 1 // 是否源文件播放（不对视频进行编码）：0为编码，1为不编码
       },
       diavos: false,
-      listData: {}, //数据
+      listData: {} //数据
     };
   },
   methods: {
@@ -59,7 +61,11 @@ export default {
     },
     isOkBf() {
       if (this.listData.sectionType === 1) {
-        this.loadPlayerScript(this.loadPlayer);
+        if(this.listData.viewSign == 2) {
+          this.loadPlayerScript_tencent(this.loadPlayer_tencent);
+        }else {
+          this.loadPlayerScript(this.loadPlayer);
+        }
       }
       if (this.listData.sectionType === 2) {
         this.loadPlayerScriptzb(this.loadPlayerzb);
@@ -79,6 +85,20 @@ export default {
         });
       }
     },
+    loadPlayerScript_tencent(callback) {
+      if (!window.TCPlayer) {
+        const myScript = document.createElement("script");
+        myScript.setAttribute("src", this.vodPlayerJsForTCPlayer);
+        myScript.onload = callback;
+        document.body.appendChild(myScript);
+      } else {
+        callback();
+        this.player_tencent.on("server", (...params) => {
+          this.$message.error(returnTitle(params[1]));
+          console.log(params);
+        });
+      }
+    },
     loadPlayer() {
       var self = this;
       const polyvPlayer = window.polyvPlayer;
@@ -88,11 +108,36 @@ export default {
         height: 533,
         vid: self.vid,
         teaser_show: 0,
-        playsafe: function (vid, next) {
-          self.$api.obtainpolyvvideosign(vid).then((res) => {
+        playsafe: function(vid, next) {
+          self.$api.obtainpolyvvideosign(vid).then(res => {
             next(res.data);
           });
-        },
+        }
+      });
+    },
+    loadPlayer_tencent() {
+      var self = this;
+      const TCPlayer = window.TCPlayer;
+      try {
+        let video = document.querySelector("video");
+        video.parentNode.removeChild(video);
+      } catch (error) {
+        console.log("清除video标签异常");
+      }
+      let player_tencent = document.createElement("video");
+      player_tencent.id = "player-tencent";
+      document
+        .getElementById("player")
+        .insertAdjacentElement("afterend", player_tencent);
+      self.$api.obtaintcvideosign(self.vid).then(res => {
+        self.player_tencent = TCPlayer("player-tencent", {
+          width: 800,
+          height: 533,
+          fileID: self.vid,
+          appID: res.data.appID,
+          psign: res.data.psign,
+          licenseUrl: res.data.licenseUrl
+        });
       });
     },
     /**
@@ -103,6 +148,9 @@ export default {
       if (this.listData.sectionType === 1 && this.player) {
         this.player.destroy();
       }
+      if (this.listData.sectionType === 1 && this.player_tencent) {
+        this.player_tencent.dispose();
+      }
       if (this.listData.sectionType === 2 && this.playerzb) {
         this.playerzb.destroy();
       }
@@ -127,10 +175,10 @@ export default {
         width: 800,
         height: 533,
         uid: self.uidzb,
-        vid: self.vidzb,
+        vid: self.vidzb
       });
-    },
-  },
+    }
+  }
 };
 </script>