How to set src of video tag at dynamic?

I think I have something like that made with a custom component. Maybe it helps

"use strict";

const videowithupload = (editor) => {
    editor.DomComponents.addType("videowithupload", {
        // isComponent: (el) => {
        //   console.debug(el);
        // },
        model: {
            defaults: {
                tagName: 'video',
                autoplay: true,
                loop: true,
                muted: true,
                controls: false,
                poster: "poster.png",
                src: "",
                draggable: false,
                removable: false,
                copyable: false,
                resizable: false,
                stylable: [],
                traits: []
            },
            init() {
                console.debug("video - model - init");
            },
            updated(property, value) {
                // console.debug(property);
                // console.debug(value);
                // console.debug(prevValue);

                if (property === "src")
                    this.set("src", value);
            }
        },
        view: {
            events: {
                dblclick: "onActive"
            },
            init() {
                console.debug("video - view - init");
                const { model } = this;

                const props = [
                    'loop',
                    'autoplay',
                    'controls',
                    'color',
                    'rel',
                    'modestbranding',
                    'poster'
                ];
                const events = props.map(p => `change:${p}`).join(' ');

                this.listenTo(model, 'change:src', this.updateSrc);
                this.listenTo(model, events, this.updateVideo);
            },
            onRender() {
                console.debug("video - view - onRender");
                
                this.updateVideo();
            },
            updateVideo(){
                const { model, el } = this;

                el.loop = model.get('loop');
                el.autoplay = model.get('autoplay');
                el.controls = model.get('controls');
                el.poster = model.get('poster');
            },
            updateSrc() {
                console.debug("video - view - updateSrc");

                const { model, el } = this;
                if (!el) return;

                let src = model.get('src');
                el.src = src;
            },
            onActive(e) {
                console.debug("video - view - onActive");

                editor.runCommand('open-assets', {
                    target: this.model,
                    types: ['videos'],
                    accept: 'video/*',
                    onSelect() {
                        console.debug("video - upload - onSelect")
                        editor.Modal.close();
                        editor.AssetManager.setTarget(null);
                    }
                });

                e.stopPropagation();
            }
        },
    });
}

export default videowithupload;

If you need to update only the block content (eg. the change will be applied on new dragged blocks) you can change it in this way:

const block = editor.BlockManager.get('html/video');
block.set('content', '<video ...>')

if you need to change Components in the canvas, I'd recommend reading more in detail Components

,Thanks @artf and stf1981 for your response, Actually I drag and drop multiple videos with generated Random number to Id attribute. In this case How to update src specific selected video?

I gets failed to update src.

Thanks for reporting this, @san-123.

Great question about How to set src of video tag at dynamic?. The recommended approach with GrapesJS is to use the event-driven API.

Start here:

1. Check the GrapesJS documentation for your specific module
2. Look for the on() event listener method
3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

• Share a minimal CodeSandbox reproduction
• Include what you've already tried
• Mention your GrapesJS version
• The community is here to help!