HTML5 ContentEditable添加視頻

Question

因此，借助html5的contenteditable功能，您可以使用javascript嵌入圖像...視頻呢？ 有任何想法嗎？ 我不知道從哪里開始。 謝謝。

Answer 1

您發布的小提琴使用execCommand函數來更改contenteditable區域的格式。 要插入圖像，它使用insertImage命令。 完整的命令列表可在“ 命令”下找到。

沒有用於插入視頻的預定義命令，這很有意義：

1. 不同的視頻格式需要不同的包裝
2. 創建每種類型的視頻包裝程序所需的代碼很麻煩，對於大多數人來說可能是多余的
3. 沒有完全實現的將視頻嵌入頁面上的標准方法（就像通過<img>標簽嵌入圖像一樣）

無論如何，那里有一個名為insertHTML的命令，該命令：

在插入點插入HTML字符串（刪除選擇）。 需要將有效的HTML字符串作為值參數傳遞。

因此，盡管它無法立即使用， insertHTML理論上講，您可以使用insertHTML命令創建自己的解決方案：

1. 提示用戶輸入視頻網址
2. 通過擴展名確定視頻格式
3. 創建一個包含正確的視頻包裝器的動態HTML字符串，方法可能是將格式與數組匹配，然后返回基本字符串
4. 確保字符串是值
5. 使用insertHTML在光標位置插入字符串

不過，我尚未對此進行測試，據我所知，將視頻嵌入到contenteditable可能是完全不可能的。