Html5 contenteditable add video

Question

So with html5's contenteditable feature, you can embed images with javascript... What about videos? Any ideas? I don't know where to start. Thank you.

Answer 1

The fiddle that you posted uses the execCommand function to change the formatting of the contenteditable region. To insert an image, it uses the insertImage command. A full list of commands can be found here under Commands.

There are no predefined commands for inserting videos, which makes sense as:

1. Different video formats need different wrappers
2. The code required for creating each type of video wrapper would be cumbersome and probably superfluous to most people
3. There is no fully implemented standard way of imbedding videos on a page (like there is with embedding images, through the <img> tag

Regardless, there is a command there called insertHTML which:

Inserts an HTML string at the insertion point (deletes selection). Requires a valid HTML string to be passed in as a value argument.

So while it won't work out of the box, you could, in theory, create your own solution that uses the insertHTML command:

1. Prompt user for video url
2. Determine format of video through extension
3. Create a dynamic HTML string that includes the correct video wrapper, possibly by matching the format to an array and returning the basic string
4. Make sure the string is value
5. Use insertHTML to inset the string at the cursor location

I haven't tested this, however, so as far as I know embedding videos in contenteditable could be altogether impossible.