<template>
  <video
    :id="videoIds"
    class="video-js vjs-default-skin video_item"
    autoplay
    muted
    preload="auto"
    :pip='pip'
    @pause='pauseEvent'
  >
    <source :src="url" style="width: 100%; height: 100%" />
  </video>
</template>

<script setup>
import { http } from "@/api/service";
import emitter from "@/utils/eventBus.js";
import { clickRZ } from "@/utils/daily.js";
import videojs from "video.js/dist/video.min";
import "video.js/dist/video-js.min.css";
import {
  defineComponent,
  onMounted,
  onBeforeUnmount,
  ref,
  watch,
  nextTick
} from "vue";
const myPlayer = ref(null); //视频对象
const videoIds = ref(0); //视频对象ID
const url = ref();
// 在onMounted阶段进行初始化
onMounted(() => {
  //设置视频对象ID
  let videoCount = window.localStorage.getItem("videoCount");
  if (videoCount) {
    videoCount++;
    window.localStorage.setItem("videoCount", videoCount);
    videoIds.value = `video_${videoCount}`;
  } else {
    window.localStorage.setItem("videoCount", 1);
    videoIds.value = `video_${window.localStorage.getItem("videoCount")}`;
  }
  nextTick(() => {
    initVideoSourc();
  });
});

onBeforeUnmount(() => {
  //销毁视频对象
  myPlayer.value.dispose();
});
//参数
const props = defineProps({
  sbbh: String //视频地址
});
// 监听视频地址变化
watch(
  () => props.sbbh,
  (n) => {
    http.previewURLs({ sbbh: n }).then((res) => {
      let data = JSON.parse(res);
      url.value = data.data.url;
      changeVideoSource(url.value);
    });
  }, {
    deep: true,
    immediate: true
  }
);

//初始化视频
function initVideoSourc() {
  myPlayer.value = videojs(
    videoIds.value,
    {
      bigPlayButton: false, //播放悬浮大按钮
      textTrackDisplay: false, //文本轨道
      posterImage: false, //封面
      errorDisplay: false,
      controls: true //显示控件
      // ...其他配置参数
    },
    function () {
      this.play();
    }
  );
}
const pauseEvent=(val)=>{
  clickRZ('点击了视频暂停播放')

}
// 视频地址发生变化时的处理
function changeVideoSource(src) {
  if (!src) return;
  myPlayer.value.src([
    {
      type: "application/x-mpegURL",
      src: src
    }
  ]);
  myPlayer.value.play();
}
</script>

<style lang="scss" scoped>
.video_item {
  width: 100%;
  height: 100%;
}
</style>
<style scoped>
@import "~@/components/h5player/static/css/antd.min.css";
</style>
