这样创建的video如何动态的控制他的播放与暂停

<template>
<iframe @event1="event1" @event2="event2" :onload="onloadCode" src="about:blank"
style="width: 100%;height: 380rpx;border-radius: 15rpx;border: none;"></iframe>
</template>

<script>
export default {
data() {
return {
onloadCode: `
// 设置body样式，移除margin和padding
this.contentWindow.document.body.style.margin = '0';
this.contentWindow.document.body.style.padding = '0';
this.contentWindow.document.body.style.overflow = 'hidden';

            // 构建视频容器和视频元素  
            this.contentWindow.document.body.innerHTML = \`  
                <div style="width: 100%;height: 100%;overflow: hidden;">  
                    <video id="video${this.videoId}"  
                        style="width: 100%;height: 100%;object-fit: cover;"   
                        controls="controls"   
                        src="${this.src}"  
                        playsinline  
                        webkit-playsinline  
                    ></video>  
                </div>  
            \`;    

            // 触发事件通知父组件  
            const iframe = top.document.getElementsByTagName('iframe')[0];  
            var evObj = document.createEvent('MouseEvents');    
            evObj.initEvent('event1', true, false);    
            iframe.dispatchEvent(evObj);    

        `  
        }  
    },  
    props: {  
        src: {  
            type: String,  
            default: ''  
        },  
        videoId: {  
            type: [String, Number],  
            required: true  
        },  
        index: {  
            type: Number,  
            required: true  
        }  
    },  
    methods: {  
        event1(a) {  
            console.log('视频加载完成', a);  
        },  
        event2(a) {  
            console.log('事件2触发', a);  
        },  
        eventvideotest(e){  
            console.log('1111', e);  
        },  
    }  
}  

</script>