Quill.js嵌入视频仅显示“浏览器不支持视频”问题求助

问题根源是Quill默认会严格清理插入的HTML，可能把视频播放必需的属性（比如controls、type）给删了，或者对<video>标签的渲染做了限制，导致浏览器认不出这是可播放的视频元素。

具体解决步骤 #

• 修改Quill的HTML白名单
  手动配置允许<video>和<source>标签，以及它们的必要属性：

  const quill = new Quill('#editor', {
    modules: {
      toolbar: [/* 你的工具栏配置 */],
      sanitize: {
        allowedTags: ['p', 'br', 'video', 'source'], // 保留原有标签，新增video和source
        allowedAttributes: {
          'video': ['src', 'controls', 'width', 'height', 'autoplay', 'loop'],
          'source': ['src', 'type']
        }
      }
    },
    theme: 'snow'
  });
  

• 替换Quill默认的视频格式化规则
  Quill自带的视频模块可能会把<video>转成自定义格式，导致渲染异常。自己写个格式化器保留原始标签：

  // 注册自定义视频格式
  Quill.register({
    'formats/video': function() {
      return {
        blotName: 'block',
        tagName: 'VIDEO',
        className: null,
        attributes: ['src', 'controls', 'width', 'height', 'type'], // 保留需要的属性
        children: ['source'] // 允许嵌套source标签
      };
    }
  }, true);
  

• 跳过Quill的自动格式化（极端情况）
  如果上面的方法都不行，就让Quill直接插入原始HTML，不做处理：

  // 让剪贴板模块跳过视频标签的格式化
  quill.clipboard.addMatcher('video', function(node, delta) {
    return new Delta().insert({ html: node.outerHTML });
  });
  

• 排查第三方模块冲突
  先把所有第三方嵌入模块删掉，只留核心Quill测试视频能不能正常播放。如果没问题，再逐个加模块，找出哪个模块在干扰渲染。

验证技巧 #

改完后，插入视频的HTML代码，然后去浏览器开发者工具里查看DOM结构：确认<video>标签的controls、src这些属性都保留着，没被Quill篡改或移除。

内容的提问来源于stack exchange，提问作者Blake Senftner