Insert Html 5 video tag

[AaricChenLegacy]

        toolbar.addHandler('video', function () {
            let url = prompt("Video link");
            if (url) {
                let range = quill.getSelection(true);
                quill.updateContents(new Delta()
                    .retain(range.index)
                    .delete(range.length)
                    .insert(myViedo));
            }
        });

expected out put is

<video width="100%" height="500px" controls>
  <source src="myVideoLink" type="video/mp4">
Your browser does not support the video tag.
</video>

I know currently quill use iframe to insert video. how to do above insert with quill?

please help

[ycjcl868]

me too, can't insert <audio> tag

[dennismwagiru]

me too, can't insert <audio> tag

To provide a constistent editing experience, you need both consistent data and predictable behaviors. The DOM unfortunately lacks both of these. The solution for Quill is to maintain its own document model ie Parchment to represent its content. It is organized in its own codebase with its own API layer.

For the audio and video tags to work, you have to implement Blots for these tags. A Blot is the basic building block of a Parchment document. Several basic implementations such as Block, Inline and Embed are provided.

To create an Audio Blot, we can extend the Embed Blot as follows

import Quill from 'quill';
let BlockEmbed = Quill.import('blots/block/embed');

class AudioBlot extends BlockEmbed {
    static create(value) {
        let node = super.create();
        node.setAttribute('controls', true);
        node.setAttribute('src', value);
        return node;
    }

    static value(node) {
        return {
            src: node.getAttribute('src'),
        };
    }
}

AudioBlot.blotName = 'audio';
AudioBlot.tagName = 'audio';

export default AudioBlot;

Then import and register AudioBlot before using Quill as follows:-

import Quill from 'quill';
import AudioBlot from './AudioBlot';

Quill.register(AudioBlot, true);
export default Quill;