hls处理，需要检测，video调整

shuishen

2021-03-31 3038e767cdd3f767692fad18db0eab6445f46824

hls处理，需要检测，video调整

 src/styles/real.scss

@@ -27,4 +27,8 @@
}
.el-image .el-icon-circle-close:before {
    content: '';
}

video::-webkit-media-controls-timeline {
    display: none;
}

 src/views/realTimePolice/real.vue

@@ -2,7 +2,7 @@
 * @Author: Morpheus
 * @Date: 2021-03-17 15:21:33
 * @Last Modified by: Morpheus
 * @Last Modified time: 2021-03-29 10:19:55
 * @Last Modified time: 2021-03-29 14:12:05
 */
<template>
  <basic-container>
@@ -886,6 +886,8 @@
          return a.jtype - b.jtype;
        });

        

        this.data = data.records;

        this.loading = false;
@@ -1184,6 +1186,7 @@
    },
    // 视频通话打开关闭事件
    openRealVideoBox() {
      var that = this;
      var newAxios = axios.create({
        baseURL: "https://web.byisf.com:18000",
        withCredentials: false,
@@ -1206,25 +1209,51 @@
        .then((res) => {
          newAxios
            .get(
              `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${this.form.serialNumber}&chl=${this.form.channelNumber}`
              `https://web.byisf.com:18000/GetPlayUrl?deviceCode=${that.form.serialNumber}&chl=${this.form.channelNumber}`
            )
            .then((result) => {
              this.videoSource = result.data.data.m3u8;
              that.videoSource = result.data.data.m3u8;

              if (Hls.isSupported()) {
                var dom = document.getElementById("real_video_conversation");

                this.hls = new Hls();
                that.hls = new Hls();

                var m3u8Url = decodeURIComponent(this.videoSource);
                var m3u8Url = decodeURIComponent(that.videoSource);

                this.hls.loadSource(m3u8Url);
                that.hls.loadSource(m3u8Url);

                this.hls.attachMedia(dom);
                that.hls.attachMedia(dom);

                this.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                that.hls.on(Hls.Events.MANIFEST_PARSED, function () {
                  dom.play();
                });

                that.hls.on(Hls.Events.ERROR, function (event, data) {

                  console.log(data, 4566824159, "视频播放有问题！！！")
                  if (data.fatal) {
                    switch (data.type) {
                      case Hls.ErrorTypes.NETWORK_ERROR:
                        // try to recover network error
                        console.log(
                          "fatal network error encountered, try to recover"
                        );
                        that.hls.startLoad();
                        break;
                      case Hls.ErrorTypes.MEDIA_ERROR:
                        console.log(
                          "fatal media error encountered, try to recover"
                        );
                        that.hls.recoverMediaError();
                        break;
                      default:
                        // cannot recover
                        that.hls.destroy();
                        break;
                    }
                  }
                });
              }
            });
        });