Embedding a video player in the editor

1

Is there any way to embed a video player or any widget which can play videos ?

2

Yes, but I’m not aware of any existing reusable plugin that does this, so you’ll have to build it (probably using a node view).

3

Thanks for the reply ! can you provide some example/link on how to use node view for videos. That would be great as i am new to this.

4

If you want to embed youtube, vimeo etc. player, you can use schema and input rule to create and append fragment. At least that’s how I did it…

5

https://prosemirror.net/examples/upload/ https://prosemirror.net/examples/footnote/

6

I was able to implement one with a new schema item + custom NodeView that inserts an element with an iframe with the src attribute from the video schema.

For example, this would work if you give it a youtube embedded video link or a direct link to a video file on the web.

7

I just made HTML5 videos work by simply providing a schema for it. What’s left to do is intercepting click events with handleDOMEvents on the video tag, so the playback doesn’t start/stop each time you select the node.

  video: {
    attrs: {
      src: {},
      poster: { default: null }
    },
    group: "block",
    draggable: true,
    parseDOM: [{tag: "video", getAttrs(dom) {
      let source = dom.querySelector('source')
      return {
        src: source.getAttribute('src'),
        poster: dom.getAttribute('poster')
      }
    }}],
    toDOM(node) {
      let { src, poster } = node.attrs
      return ["video", { controls: '', draggable: 'false', poster}, ["source", { src }]]
    }
  },
  ...

I’m really impressed with the library as I’ve been co-authoring an editor framework (Substance.js) myself, which was designed for complex use-cases such as building scientific editors. I like ProseMirrors purity (e.g. no editor-specific markup in the editing canvas needed), and I’m surprised I still didn’t hit any limits yet.

@marijn fantastic work! Glad I’m finally digging into ProseMirror now.

2 Likes
8

Thanks! Glad the library works for you.