feat:add video block core

src/editor/core/draw/particle/block/modules/BaseBlock.ts

@@ -3,12 +3,13 @@ import { IRowElement } from '../../../../../interface/Row'
 import { Draw } from '../../../Draw'
 import { BlockParticle } from '../BlockParticle'
 import { IFrameBlock } from './IFrameBlock'
+import { VideoBlock } from './VideoBlock'
 
 export class BaseBlock {
 
   private draw: Draw
   private element: IRowElement
-  private block: IFrameBlock | null
+  private block: IFrameBlock | VideoBlock | null
   private blockContainer: HTMLDivElement
   private blockItem: HTMLDivElement
 
@@ -36,6 +37,9 @@ export class BaseBlock {
     if (block.type === BlockType.IFRAME) {
       this.block = new IFrameBlock(this.element)
       this.block.render(this.blockItem)
+    } else if (block.type === BlockType.VIDEO) {
+      this.block = new VideoBlock(this.element)
+      this.block.render(this.blockItem)
     }
   }
 

src/editor/core/draw/particle/block/modules/VideoBlock.ts

@@ -0,0 +1,23 @@
+import { IRowElement } from '../../../../../interface/Row'
+
+export class VideoBlock {
+
+  private element: IRowElement
+
+  constructor(element: IRowElement) {
+    this.element = element
+  }
+
+  public render(blockItemContainer: HTMLDivElement) {
+    const block = this.element.block!
+    const video = document.createElement('video')
+    video.style.width = '100%'
+    video.style.height = '100%'
+    video.style.objectFit = 'contain'
+    video.src = block.videoBlock?.src || ''
+    video.controls = true
+    video.crossOrigin = 'anonymous'
+    blockItemContainer.append(video)
+  }
+
+}

src/editor/dataset/enum/Block.ts

@@ -1,3 +1,4 @@
 export enum BlockType {
-  IFRAME = 'iframe'
+  IFRAME = 'iframe',
+  VIDEO = 'video'
 }

src/editor/interface/Block.ts

@@ -4,7 +4,12 @@ export interface IIFrameBlock {
   src: string;
 }
 
+export interface IVideoBlock {
+  src: string;
+}
+
 export interface IBlock {
   type: BlockType;
   iframeBlock?: IIFrameBlock;
+  videoBlock?: IVideoBlock;
 }