React Quill编辑器MKV/MOV视频自动下载而非播放问题求助

在自定义React Quill编辑器中上传视频时，MP4可正常内嵌播放，但MKV/MOV文件出现以下异常：

• DOM中生成了<iframe>标签，但编辑器内无视频内容，文件自动下载
• 编辑器外预览博客时，MKV/MOV仍触发下载而非内嵌播放

1. 服务器响应头配置（核心） #

浏览器是否内嵌播放视频，完全取决于服务器返回的两个响应头：

• Content-Type：必须匹配文件的真实MIME类型：
  • MKV：video/x-matroska
  • MOV：video/quicktime
• Content-Disposition：必须设为inline，不能是attachment，否则浏览器会直接触发下载

2. 替换Quill默认视频嵌入逻辑 #

Quill自带的video embed会生成<iframe>，对非MP4格式支持很差。直接改用HTML5原生<video>标签嵌入：

修改insertVideo函数：

const insertVideo = (url: string, index: number) => {
  const quill = quillRef.current?.getEditor()
  if (!quill) return

  // 构建带controls的video标签，自动适配格式
  const videoHtml = `
    <video controls width="100%" style="max-width: 100%; border-radius: 8px;">
      <source src="${url}" type="${getVideoMimeType(url)}">
      您的浏览器不支持该视频格式
    </video>
  `
  // 插入HTML内容到编辑器
  quill.insertEmbed(index, 'html', videoHtml)
}

// 辅助函数：根据文件名后缀获取对应MIME类型
const getVideoMimeType = (url: string) => {
  const ext = url.split('.').pop()?.toLowerCase()
  switch(ext) {
    case 'mkv': return 'video/x-matroska'
    case 'mov': return 'video/quicktime'
    case 'mp4':
    default: return 'video/mp4'
  }
}

3. 更新媒体URL提取逻辑 #

现在用<video>标签替代了<iframe>，需要修改extractMediaUrls函数来正确提取视频URL：

const extractMediaUrls = (html: string) => {
  const tempDiv = document.createElement('div')
  tempDiv.innerHTML = html
  const imgTags = Array.from(tempDiv.getElementsByTagName('img'))
  const imgUrls = imgTags.map((img) => img.src.split('/').pop()).filter((url): url is string => Boolean(url))
  
  // 从video的source标签里提取视频URL
  const videoSources = Array.from(tempDiv.querySelectorAll('video source'))
  const videoUrls = videoSources.map((source) => source.src.split('/').pop()).filter((url): url is string => Boolean(url))
  
  const iframeTags = Array.from(tempDiv.getElementsByTagName('iframe'))
  const iframeUrls = iframeTags.map((iframe) => iframe.src.split('/').pop()).filter((url): url is string => Boolean(url))

  return [...imgUrls, ...videoUrls, ...iframeUrls]
}

4. 注册HTML嵌入模块（如果需要） #

如果Quill提示html类型不存在，在组件初始化时注册自定义HTML blot：

useEffect(() => {
  const Block = Quill.import('blots/block')
  class HtmlBlot extends Block {
    static blotName = 'html'
    static tagName = 'div'
    static value(node: HTMLElement) {
      return node.innerHTML
    }
    static create(value: string) {
      const node = super.create() as HTMLElement
      node.innerHTML = value
      return node
    }
  }
  Quill.register(HtmlBlot, true)
}, [])

内容的提问来源于stack exchange，提问作者Brijal Kansara