Browse Source

直播流播放模块逻辑修改

Koishi 3 years ago
parent
commit
0ee7a306a3
2 changed files with 13 additions and 69 deletions
  1. 0 1
      src/views/HealthControl/HealthTab4.vue
  2. 13 68
      src/views/HealthControl/infotrack2.vue

+ 0 - 1
src/views/HealthControl/HealthTab4.vue

@@ -253,7 +253,6 @@ export default {
           rid: row.rid,
         },
         success(res) {
-          console.log(123123, res);
           if (res.code == 200) {
             that.trackDate = res.data;
             that.dialogVisible = true;

+ 13 - 68
src/views/HealthControl/infotrack2.vue

@@ -354,15 +354,14 @@
       height="800px"
       custom-class="modal"
       :close-on-click-modal="true"
+      :destroy-on-close="true"
     >
-      <video
-        class="videoPlayer"
-        id="videoPlayer"
-        muted
-        autoplay
-        webkit-playsinline
-        playsinline
-      ></video>
+      <iframe
+        class="videoBoxiframe"
+        width="100%"
+        height="600px"
+        src="http://localhost:8081?token=stream-1"
+      ></iframe>
     </el-dialog>
     <el-dialog
       title="GIS地貌"
@@ -673,71 +672,12 @@ export default {
         },
       });
       this.tableData.data = data.data;
-      console.log(123123,data)
     },
+
     showVideoBox() {
       this.videoBoxShow = true;
-      this.$nextTick(() => {
-        this.listenEvent();
-        this.resetVideo();
-      });
-    },
-    // 销毁播放实例
-    cancelPlay() {
-      $(".videoPlayer").attr("poster", "").attr("src", "");
-      this.videoPlayer &&
-        this.videoPlayer.disconnect() &&
-        (this.videoPlayer = null);
-    },
-
-    // 监听视频被暂停和被播放
-    listenEvent() {
-      let that = this;
-
-      //判断设备
-      if (H5siOS() === true || H5sSafariBrowser() === true) {
-        $(".videoPlayer").prop("controls", true);
-      }
-
-      //如果是暂停状态,就让它开始;如果是开始就让他暂停。每次开始之前都先清空参数
-      $(".videoPlayer").on("click", function () {
-        if ($(this).get(0).paused) {
-          that.resetVideo();
-        } else {
-          that.videoPlayer.disconnect();
-          $(this).get(0).pause();
-          this.BASE.showMsg({
-            type: "success",
-            msg: "暂停播放",
-          });
-        }
-      });
     },
 
-    // 重置视频播放状态
-    resetVideo() {
-      this.$nextTick(() => {
-        let videoConfig = {
-          videoid: "videoPlayer", //跟上面video标签的id一致
-          protocol: "http:", //'http:' or 'https:'
-          host: this.videoConfigHost, //'localhost:8080'自己内部的网址
-          rootpath: "/", // '/' or window.location.pathname
-          token: this.videoConfigToken, //可变参数
-          // streamprofile: this.videoConfigStreamprofile, // {string} - stream profile, main/sub or other predefine transcoding profile
-          hlsver: "v1", //v1 is for ts, v2 is for fmp4
-          session: "e312287e-d809-4b4b-a5d6-336e5006199f", //session got from login可变参数
-        };
-
-        this.cancelPlay();
-        this.videoPlayer = new H5sPlayerRTC(videoConfig);
-        this.videoPlayer.connect();
-
-        this.BASE.showMsg({
-          type: "success",
-          msg: "播放组件初始化中...请稍后...",
-        });
-      });
-    },
     selectTab: function (tab, index) {
       this.activeTab = index;
       if (index === 0) {
@@ -993,4 +933,9 @@ export default {
     height: 800px;
   }
 }
+
+.videoBoxiframe {
+  border: none;
+  overflow: hidden;
+}
 </style>