caimei-database-caimei/src/components/video-preview/video-preview.vue

<template>
  <div class="video-content">
    <video
      id="myVideoRef"
      ref="myVideoRef"
      class="video-js vjs-default-skin"
      controls
      :style="{ width: resultVideo.width, height: resultVideo.height }"
      x5-video-player-fullscreen="true"
      x5-video-player-type="h5"
      controlslist="nodownload"
      @timeupdate="handleTimeUpdate"
    >
      <source src="" type="video/mp4" />
    </video>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { IProps, IVideoOptions } from "./index.type";
import "video.js/dist/video-js.css";
import useBlobFile from "@/Hooks/useBlob";

const props = defineProps<IProps>();

const myVideoRef = ref<HTMLVideoElement | null>(null);
const resultVideo = reactive<IVideoOptions>({
  currentTime: 0,
  allTime: 0,
  width: "100%",
  height: "210px",
});

const handleTimeUpdate = () => {
  resultVideo.allTime = myVideoRef.value!.duration
  resultVideo.currentTime = myVideoRef.value!.currentTime
}

onMounted(async () => {
  console.log('视频链接', props.url)
  await useBlobFile(myVideoRef.value!, props.url);
});
</script>

<style lang="scss" scoped>
.video-content {
  width: 100%;
  max-height: 210px;
}
video::-internal-media-controls-download-button {
  display: none;
}
video::-webkit-media-controls-enclosure {
  overflow: hidden;
}
video::-webkit-media-controls-panel {
  width: calc(100% + 30px);
}
</style>