如何在Quill JS中嵌入Blob视频文件？视频无法播放求助

Hey there, let's get your Blob video playing in Quill instead of showing raw Blob text! The issue here is that Quill doesn't automatically recognize raw Blob objects as video content—it just treats them like plain text when you insert them directly.

The Core Problem #

When you add the Blob object straight into Quill, it converts the Blob to its string representation (which is why you see that raw text). But when you open that Blob in the browser directly, the browser knows to interpret it as a video file. We need to tell Quill to do the same.

Step-by-Step Solution #

Here are two reliable ways to fix this:

Method 1: Insert a Video HTML Element Directly

This is the quickest fix—we'll convert the Blob to a usable URL, create a proper <video> tag, and insert that HTML into Quill:

// Assume your recorded Blob is stored in videoBlob
const videoUrl = URL.createObjectURL(videoBlob);

// Build a valid video element
const videoHtml = `
  <video src="${videoUrl}" controls width="640" contenteditable="false">
    Your browser doesn't support video playback.
  </video>
`;

// Get your Quill instance
const quill = new Quill('#editor', { theme: 'snow' });

// Insert the video at the current cursor position (or end if no selection)
const selection = quill.getSelection();
const insertIndex = selection ? selection.index : quill.getLength() - 1;
quill.insertHTML(insertIndex, videoHtml);

// Don't forget to clean up the ObjectURL later to avoid memory leaks
window.addEventListener('beforeunload', () => {
  URL.revokeObjectURL(videoUrl);
});

Method 2: Register a Custom Video Blot (More Robust)

If you plan to insert videos frequently, registering a custom Quill Blot makes the process cleaner and more maintainable. This lets Quill treat videos as first-class embed elements:

// Register the custom video blot
class VideoEmbed extends Quill.import('blots/block/embed') {
  static create(videoUrl) {
    const node = super.create();
    node.src = videoUrl;
    node.controls = true;
    node.width = 640;
    node.setAttribute('contenteditable', 'false');
    return node;
  }

  static value(node) {
    return node.src;
  }
}
VideoEmbed.blotName = 'video-embed';
VideoEmbed.tagName = 'VIDEO';

Quill.register(VideoEmbed);

// Now insert your Blob video like this:
const videoUrl = URL.createObjectURL(videoBlob);
const quill = new Quill('#editor', { theme: 'snow' });

const insertIndex = quill.getSelection()?.index || quill.getLength() - 1;
quill.insertEmbed(insertIndex, 'video-embed', videoUrl);

// Cleanup ObjectURL on page unload
window.addEventListener('beforeunload', () => {
  URL.revokeObjectURL(videoUrl);
});

Key Notes #

• Memory Management: Always use URL.revokeObjectURL() when you're done with the video (like when the page closes) to free up browser memory.
• Contenteditable: Setting contenteditable="false" on the video element prevents users from accidentally editing the video tag's raw HTML in Quill.
• Browser Support: Make sure to add a fallback message inside the <video> tag for browsers that don't support video playback.

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