<template>
  <div class="Camera">
    <video
      :ref="'video' + videoId"
      :id="'video' + videoId"
      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:'camera',
    props: {
    videoUrl: {
      type: String,
      default: "",
    },
    id: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      videoUrlList:'',
      videoId : 0,
    };
  },
  mounted(){
    this.videoId = this.id
  },
  watch: {
    videoUrl: {
        deep: true,
        handler(newVal) {
          this.clickSurveillance(newVal)
        }
      },
      id: {
        deep: true,
        handler(newVal,oldVal) {
          this.videoId = newVal
        }
      },
  },
  methods: {
    // 点击摄像头
    clickSurveillance(newVal) {
      let that = this
      // 注意这里需要加定时器或者在异步请求中才可以
      setTimeout(() => {
        this.player = videojs(
          'video'+this.videoId,
          {
            bigPlayButton: false,
            controlBar: false,
            notSupportedMessage: "此视频暂无法播放，请稍后再试",
          },
          function () {
            this.play();
          }
        );

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

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