<template>
  <div class="cameraVideo">
    <video
      style="width: 100%; height: 100%"
      @loadstart="loadstart($event)"
      @canplay="canplay($event)"
      class="videoControl"
      muted
      :id="ownVideoData.cameraName"
    ></video>
  </div>
</template>

<script>
// import { equip_camera } from "../../dao/situation";
import Videojs from "video.js";
import "./videojs-flvjs-plugin";
export default {
  name: "cameraVideo",
  props: ["videoData"],
  watch: {},
  data() {
    return {
      cameraLoading: true,
      supported: false,
      player: null,
      interval: null,
      ownVideoData: {},
    };
  },
  methods: {
    canplay() {
      this.cameraLoading = false;
      this.$emit("vidCanplay", this.ownVideoData);
    },
    loadstart() {},
    loadVideo() {},
    bindEvents() {},
    handleErr() {},
    pause() {},
    destroy() {
      if (this.player) {
        this.player.dispose();
        this.player = null;
      }
    },
  },

  mounted() {
    this.ownVideoData = this.videoData;
    // m3u8
    // if (this.ownVideoData && this.ownVideoData.functionType == "99") {
    //   setTimeout(() => {
    //     // hls
    //     this.player = Videojs(document.getElementById(this.ownVideoData.oid), {
    //       autoplay: "muted", //自动播放
    //       controls: true, //用户可以与之交互的控件
    //       loop: true, //视频一结束就重新开始
    //       fill: true,
    //       techOrder: ["html5", "flvjs"], // 兼容顺序
    //       html5: {
    //         hls: {
    //           withCredentials: true,
    //         },
    //       },
    //       sources: [
    //         {
    //           src: `${this.ownVideoData.videoUrl}`,
    //           type: "application/x-mpegURL",
    //         },
    //       ],
    //     });
    //     this.player.on("playing", () => {
    //       this.canplay();
    //     });
    //     this.player.on("error", (e) => {
    //       console.log("hls error", e);
    //       equip_camera().then((res) => {
    //         let allCameras = res.content;
    //         let targetCamera = allCameras.find((camera) => {
    //           return camera.oid == this.ownVideoData.oid;
    //         });
    //         // this.destroy();
    //         this.player.pause();
    //         // this.player = null;
    //         this.ownVideoData = targetCamera;
    //         setTimeout(() => {
    //           this.player.src([
    //             {
    //               src: targetCamera.videoUrl,
    //               type: "application/x-mpegURL",
    //             },
    //           ]);
    //           this.player.on("playing", () => {
    //             this.canplay();
    //           });
    //         }, 100);
    //       });
    //     });
    //   }, 0);
    // }
    // // flv
    // else {
    setTimeout(() => {
      //flv
      this.player = Videojs(document.getElementById(this.ownVideoData.cameraName), {
        autoplay: "muted", //自动播放
        controls: true, //用户可以与之交互的控件
        loop: true, //视频一结束就重新开始4
        fill: true,
        techOrder: ["html5", "flvjs"], // 兼容顺序
        flvjs: {
          mediaDataSource: {
            isLive: false,
            cors: true,
            withCredentials: false,
          },
        },
        sources: [{ src: this.ownVideoData.videoUrl, type: "video/x-flv" }],
      });
      this.player.on("playing", () => {
        this.canplay();
      });
    }, 0);
    // }
  },
  computed: {},
  beforeDestroy() {
    this.destroy();
  },
};
</script>
<style>
video {
  width: 100% !important;
  height: 100% !important;
}
</style>
<style lang="less" scoped>
.cameraVideo {
  .videoControl {
    width: 100%;
    height: 100%;
  }
}
::v-deep .vjs-modal-dialog-content {
  display: none;
}
::v-deep .vjs-control-bar {
  display: none;
}
::v-deep .vjs-big-play-button {
  display: none;
}
::v-deep .vjs-control-text {
  display: none;
}
::v-deep .vjs-close-button{
  display: none;
}
</style>
