m3u8 vue3

最新推荐文章于 2024-07-11 10:59:33 发布

_斯洛伐克

最新推荐文章于 2024-07-11 10:59:33 发布

阅读量84

点赞数 2

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_42348009/article/details/139819266

版权

vue3打包mau8会报错所以直接外部引用

<template>
  <a-modal
    title="监控"
    :visible="visible"
    width="70%"
    @cancel="handleCancel"
    @ok="handleOk"
    :footer="null"
  >
    <video ref="videoPlayer" class="video" muted width="100%" height="580px" />
  </a-modal>
</template>

<script setup>
import {
  ref,
  nextTick,
  onMounted,
  onBeforeUnmount,
  onActivated,
  onDeactivated,
} from "vue";

const visible = ref(false);
const player = ref(null);
const videoPlayer = ref(null);
let disposed = false; // 标记是否已销毁

onBeforeUnmount(() => {
  if (player.value) {
    player.value.dispose();
    disposed = true;
  }
});

onMounted(() => {
  if (player.value) {
    player.value.play();
  }
});

onActivated(() => {
  if (player.value) {
    player.value.play();
  }
});

onDeactivated(() => {
  if (player.value) {
    player.value.pause();
  }
});

const showModal = (url) => {
  visible.value = true;
  nextTick(() => {
    initVideo(url);
  });
};

const handleOk = () => {
  if (player.value) {
    player.value.pause(); // 暂停播放器
    //  player.value.dispose(); // 销毁播放器
    player.value = null;
  }
  visible.value = false;
};

const handleCancel = () => {
  if (player.value) {
    player.value.pause(); // 暂停播放器
    //  player.value.dispose(); // 销毁播放器
    player.value = null;
  }
  visible.value = false;
};

const initVideo = (url) => {
  if (!player.value || disposed) {
    disposed = false; // 重置销毁标记
    const script = document.createElement("script");
    script.src = "https://vjs.zencdn.net/8.3.0/video.min.js";
    script.onload = () => {
      player.value = videojs(videoPlayer.value, {
        autoplay: true,
        controlBar: false,
        controls: true,
        muted: true,
        preload: "auto",
        sources: [
          {
            src: url,
            type: "application/x-mpegURL",
          },
        ],
        playbackRates: [0.5, 1, 1.5, 2],
      });
    };
    document.body.appendChild(script);
  } else {
    player.value.src({ src: url, type: "application/x-mpegURL" });
    player.value.load();
    player.value.play();
  }
};

defineExpose({
  showModal,
});
</script>

<style lang="scss" scoped>
@import url("//vjs.zencdn.net/8.3.0/video-js.min.css");

.video,
video {
  position: absolute;
  width: 100%;
  height: 580px;
}

.vjs-modal-dialog {
  display: none !important;
}
:deep(.ant-modal .ant-modal-content) {
  height: 600px !important;
}
</style>