<template>
  <div class="Camera">
    <video
      ref="video"
      id="video"
      class="video-js vjs-default-skin"
      width="100%"
      height="100%"
      object-fit:cover
      preload="auto"
      style="overflow: hidden;"
    >
      <source :src="videoUrlList" type="application/x-mpegURL" />
    </video>
  </div>
</template>

<script>
import videojs from "video.js";
import "videojs-contrib-hls";
import "@videojs/http-streaming";
import "video.js/dist/video-js.min.css";
export default {
    name:'cameraBig',
    props: {
    cameraBig:{
       type: String,
       default: "",
    },
  },
  data() {
    return {
      videoUrlList:'',
    };
  },
  mounted(){
      //this.clickSurveillance(this.cameraBig)
  },
  watch: {
    // cameraBig: {
    //     deep: true,
    //     handler(newVal) {
    //       console.log(newVal,'wwwwwwwwww');
    //       this.clickSurveillance(newVal)
    //     }
    //   },
  },
  methods: {
    // 点击摄像头
    clickSurveillance(newVal) {
      let that = this
      // 注意这里需要加定时器或者在异步请求中才可以
      setTimeout(() => {
        this.player = videojs(
          'video',
          {
            bigPlayButton: false,
            controlBar: false,
            notSupportedMessage: "此视频暂无法播放，请稍后再试",
          },
          function () {
            this.play();
          }
        );

        // 当前要播放的视频地址
        this.videoUrlList = newVal;
        this.player.src(this.videoUrlList);
        videojs('video').ready(function () {
          this.player = this;
          this.player.play();
        });
      }, 400);
    },
    // 关闭摄像头
    closeVideo() {
      //console.log('关闭');
      this.player.dispose();
    },
  },
};
</script>

<style lang="less" scoped>
.video-js{
    width: 100%;
    height: 100%;
}
</style>