播放器调整

src/features/invigilation/common/FlvMedia.vue

@@ -5,13 +5,7 @@
     element-loading-text="加载中"
     element-loading-background="rgba(0, 0, 0, 0.8)"
   >
-    <video
-      ref="VideoMedia"
-      :id="videoId"
-      muted
-      @pause="playerPaused"
-      @play="playerPlaying"
-    ></video>
+    <!-- <video :id="videoId" muted></video> -->
     <div v-if="result.error" class="media-error" @click.stop="() => {}">
       <div class="media-error-content">
         <span>{{ result.message }}，</span>
@@ -46,6 +40,7 @@
 import TCPlayer from "tcplayer.js";
 // doc: https://cloud.tencent.com/document/product/881/30820
 import timeMixin from "../../../mixins/timeMixin";
+import { randomCode } from "@/utils/utils";
 
 export default {
   name: "flv-media",
@@ -65,7 +60,7 @@ export default {
   },
   data() {
     return {
-      videoId: `video${this._uid}`,
+      videoId: null,
       flvPlayer: null,
       muted: true,
       paused: false,
@@ -93,24 +88,34 @@ export default {
   methods: {
     initVideo() {
       if (!this.liveUrl) return;
-      this.loading = true;
-
+      // this.loading = true;
+      this.createNewVideo();
       this.flvPlayer = TCPlayer(this.videoId, {
         controls: false,
         autoplay: true,
         muted: false,
         bigPlayButton: false,
+        reportable: false,
       });
       this.flvPlayer.src(this.liveUrl);
       this.flvPlayer.ready(() => {
-        this.loading = false;
+        // this.loading = false;
         this.flvPlayer.volume(0);
       });
       this.flvPlayer.on("error", this.playError);
       this.flvPlayer.on("ended", this.destroyPlayer);
+      this.flvPlayer.on("pause", this.playerPaused);
+      this.flvPlayer.on("play", this.playerPlaying);
+    },
+    createNewVideo() {
+      let videoDom = document.createElement("video");
+      this.videoId = `vedio-${randomCode()}`;
+      videoDom.id = this.videoId;
+      this.$el.appendChild(videoDom);
     },
-    playError(code) {
-      switch (code) {
+    playError(res) {
+      // console.log(res);
+      switch (res.data.code) {
         case 1:
           console.log("媒体问题，准备重试！");
           this.retryPlay();
@@ -124,7 +129,7 @@ export default {
           this.retryPlay();
           break;
         default:
-          console.log(code + "未知问题，无法播放！");
+          console.log(res.data.code + "其他问题，无法播放！");
           this.retryPlay();
           break;
       }
@@ -153,7 +158,7 @@ export default {
           message: "播放失败",
         };
         this.retryCount = 0;
-        this.loading = false;
+        // this.loading = false;
         return;
       }
 
@@ -178,7 +183,7 @@ export default {
     videoMuted() {
       if (!this.flvPlayer) return;
       const volume = this.flvPlayer.volume();
-      console.log(volume);
+      // console.log(volume);
       this.$emit("muted-change");
       const nvolume = volume === 1 ? 0 : 1;
       this.flvPlayer.volume(nvolume);
@@ -189,7 +194,7 @@ export default {
         error: false,
         message: "",
       };
-      this.loading = true;
+      // this.loading = true;
       this.$nextTick(() => {
         this.destroyPlayer();
         this.initVideo();