Question

我正在制定一项要求，我可以录制屏幕并将录制的视频加载到主轴编辑器中。

现在，当我尝试将视频嵌入到iframe时，我没有看到嵌入式iframe的任何src值。

但是当我使用浏览器的inspect元素更改src时，视频会在主播编辑器中加载：

以下是我的代码。

 let range = tempEditor.getSelection(true);
 tempEditor.insertEmbed(range.index, 'video', tempSrc, 'user');

下面 tempSrc值为blob:http://localhost:4100/4ab588cf-7ed7-4c08-8852-6c03895ae47a

在上述声明之后，我可以在编辑器中看到iframe但不能看到src值。

当我尝试在上述检查浏览器中更新源时，视频播放正常

Answer 1

我正在使用以下代码段将iframe（即YouTube视频）嵌入到Quill中。

确保将导入类放在类文件import Quill from 'quill';的顶部

const id = '123456' //Just a unique id
const vendorLower = 'youtube';
const editorRef = this.quillEditorRef;
const range = editorRef.getSelection();
let index = 0;

if (range !== null) {
  index = range.index;
} else {
  index = editorRef.container.innerText.length + 1;
}

const BlockEmbed = Quill.import('blots/block/embed');
class MediaBlot extends BlockEmbed {
  static create(value) {
    const node = super.create();
    node.setAttribute('src', 'https://www.youtube.com/embed/XXXXXXXXX');
    node.setAttribute('frameborder', '0');
    node.setAttribute('allow', 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture');
    node.setAttribute('allowtransparency', true);
    node.setAttribute('allowfullscreen', true);
    node.setAttribute('scrolling', '0');
    node.setAttribute('width', '100%');
    node.setAttribute('height', '315px');
    return node;
  }

  static value(node) {
    return node.dataset.id;
  }
}

MediaBlot.blotName = vendorLower;
MediaBlot.tagName = 'iframe';
Quill.register(MediaBlot);
this.quillEditorRef.insertEmbed(index + 1, vendorLower, id);

希望有人会发现这很有用。

干杯！

Answer 2

vibin。你说：

此处的tempSrc值为 blob：http://localhost:4100/4ab588cf-7ed7-4c08-8852-6c03895ae47a

为<iframe> src设置值是应该谨慎完成的事情：

标签指定一个内联框架。内联框架用于在当前HTML文档中嵌入另一个文档。

Source

因此，基本上，iframe代表在网站上剪切和粘贴部分内容。出于版权原因，许多公司和网站都禁止自由显示内容。但是，有些工具允许这样做，但要采取某些措施。

例如，YouTube允许使用<iframe>，但使用其他URL在其他站点上共享和观看其视频。如果浏览器中具有以下URL：

https://www.youtube.com/watch?v=NihM746-Msw

放置在<iframe>中的嵌入版本如下：

https://www.youtube.com/embed/NihM746-Msw

<iframe>元素可能具有以下内容：

<iframe width="560" height="315" src="https://www.youtube.com/embed/NihM746-Msw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

插入（来自浏览器的）youtube视频URL时，查询video format does this process automatically。

但是那里有些东西要看。请注意，通过这种方式，您将使用托管在网站（即Internet）上的视频。如果要从本地计算机显示视频（来自文件），则需要使用HTML <video>元素，不要 {{1 }}。

Quill's native video format does not work with the HTML video element。因此，您将需要创建一种具有此要求的新格式。

您可以在以下链接中找到有关创建自己的格式的更多信息：

Cloning Medium with Parchment
Quill-Examples-and-FAQ
Awesome Quill - Modules
另请参阅the source code of the video format。

如您所见，这不是Quill的问题，而是定义所需设置的问题。我希望这可以解决您的问题，如果您需要更多信息，请在我的答案中添加评论，如有必要，我会对其进行编辑。

无法以编程方式将Src嵌入到iframe中

2 个答案: