quilleditor覆盖默认视频上传video处理auto

// 引入 Quill 的 BlockEmbed 用于自定义视频格式
const BlockEmbed = Quill.import('blots/block/embed');

// 自定义视频 Blot，使用 iframe 并支持自定义内容标签
class CustomVideo extends BlockEmbed {
  static blotName = 'video';
  static tagName = 'iframe';
  static className = 'ql-video';

  static create(value: string) {
    const node = super.create(value) as HTMLIFrameElement;
   
    // 如果传入的是视频URL（.mp4等），转换为自定义的内容标签格式
    // 你可以根据实际需求修改这个转换逻辑
    let iframeSrc = value;
   
    // 检测是否是直接的视频文件地址（.mp4, .webm, .ogg等）
    if (/\.(mp4|webm|ogg|mov|avi)(\?.*)?$/i.test(value)) {
      // 将视频文件地址转换为自定义的播放页面地址
      // 例如：https://example.com/video.mp4 -> https://example.com/player?video=video.mp4
      // 你可以根据实际业务需求修改这个转换规则
      iframeSrc = convertVideoUrlToPlayerUrl(value);
    }
   
    node.setAttribute('src', iframeSrc);
    node.setAttribute('frameborder', '0');
    node.setAttribute('allowfullscreen', 'true');
    node.setAttribute('width', '100%');
    node.setAttribute('height', '400');
   
    return node;
  }

  static value(node: HTMLIFrameElement) {
    return node.getAttribute('src');
  }
}

// 视频URL转换函数 - 将直接的视频文件地址转换为播放器地址
// 你可以根据实际需求修改这个函数
function convertVideoUrlToPlayerUrl(videoUrl: string): string {
  // 默认实现：将CDN地址转换为播放器地址
  // 假设你的播放器地址格式为: /video-player?url=xxx
  return `/video-player?url=${decodeURIComponent(videoUrl)}`;
}

// 注册自定义视频 Blot，覆盖默认的 video 格式
Quill.register(CustomVideo, true);

项目里新建一个本地/video-player路由的页面

<template>
  <div class="video-player-container">
    <div v-if="videoUrl" class="video-wrapper">
      <video
        ref="videoRef"
        :src="videoUrl"
        controls
        controlslist="nodownload"
        preload="metadata"
        :autoplay="false"
        @error="handleVideoError"
      >
        您的浏览器不支持视频播放1
      </video>
    </div>
    <div v-else class="error-message">
      <el-empty description="视频地址无效" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElMessage } from 'element-plus';

const route = useRoute();
const videoRef = ref<HTMLVideoElement>();
const videoUrl = ref('');

onMounted(() => {
  // 从 URL 参数中获取视频地址
  const urlParam = route.query.url as string;
  if (urlParam) {
    videoUrl.value = decodeURIComponent(urlParam).replace("/video-player?url=", "");
  } else {
    ElMessage.error('未找到视频地址');
  }
});

const handleVideoError = (e: Event) => {
  console.error('视频加载失败:', e);
  ElMessage.error('视频加载失败,请检查视频地址是否正确');
};
</script>

<style scoped>
.video-player-container {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000;
  overflow: hidden;
}

.video-wrapper {
  width: 100%;
  max-width: 1200px;
  padding: 20px;
}

video {
  width: 100%;
  height: auto;
  max-height: 80vh;
  outline: none;
}

.error-message {
  background-color: #fff;
  padding: 40px;
  border-radius: 8px;
}
</style>