Html5 contenteditable添加视频

Question

因此，使用html5的contenteditable功能，您可以使用javascript嵌入图片......视频怎么样？有任何想法吗？我不知道从哪里开始。谢谢。

Answer 1

您发布的小提琴使用execCommand功能更改contenteditable区域的格式。要插入图像，它使用insertImage命令。完整的命令列表可以是 found here under Commands.

没有用于插入视频的预定义命令，这有意义：

1. 不同的视频格式需要不同的包装
2. 创建每种类型的视频包装所需的代码很麻烦，对大多数人来说可能是多余的
3. 在网页上嵌入视频没有完全实现的标准方式（就像嵌入图片一样，通过<img>标记

无论如何，有一个名为insertHTML的命令：

  

在插入点插入HTML字符串（删除选择）。需要将有效的HTML字符串作为值参数传入。

因此，虽然它不会开箱即用，但理论上，您可以使用insertHTML命令创建自己的解决方案：

1. 提示用户提供视频网址
2. 通过扩展程序确定视频格式
3. 创建包含正确视频包装的动态HTML字符串，可能是将格式与数组匹配并返回基本字符串
4. 确保字符串为值
5. 使用insertHTML插入光标位置的字符串

我没有对此进行过测试，因此据我所知，在contenteditable中嵌入视频可能完全不可能。