support video play back without asset loading

src/stores/constructRenderState.js

@@ -76,18 +76,29 @@ export const addBackgroundOrCg = (
     }
 
     if (presentationState.background.resourceId) {
-      const { images = {} } = resources;
-      const background = images[presentationState.background.resourceId];
+      const { images = {}, videos = {} } = resources;
+      const background =
+        images[presentationState.background.resourceId] ||
+        videos[presentationState.background.resourceId];
       if (background) {
-        storyContainer.children.push({
+        const isVideo =
+          videos[presentationState.background.resourceId] !== undefined;
+        const element = {
           id: `bg-cg-${presentationState.background.resourceId}`,
-          type: "sprite",
+          type: isVideo ? "video" : "sprite",
           x: 0,
           y: 0,
           src: background.fileId,
           width: background.width,
           height: background.height,
-        });
+        };
+
+        if (isVideo) {
+          element.loop = background.loop ?? false;
+          element.volume = background.volume ?? 500;
+        }
+
+        storyContainer.children.push(element);
       }
     }
 
@@ -279,14 +290,15 @@ export const addVisuals = (state, { presentationState, resources }) => {
     for (const item of items) {
       // Check if both resourceId and resourceType exist, and resourceType is "image"
       if (item.resourceId) {
-        const { images = {} } = resources;
-        let resource = images[item.resourceId];
+        const { images = {}, videos = {} } = resources;
+        let resource = images[item.resourceId] || videos[item.resourceId];
 
         if (resource) {
+          const isVideo = videos[item.resourceId] !== undefined;
           const transform = resources.transforms[item.transformId];
-          storyContainer.children.push({
+          const element = {
             id: `visual-${item.id}`,
-            type: "sprite",
+            type: isVideo ? "video" : "sprite",
             src: resource.fileId,
             width: resource.width,
             height: resource.height,
@@ -297,7 +309,14 @@ export const addVisuals = (state, { presentationState, resources }) => {
             rotation: transform.rotation,
             scaleX: transform.scaleX,
             scaleY: transform.scaleY,
-          });
+          };
+
+          if (isVideo) {
+            element.loop = resource.loop ?? false;
+            element.volume = resource.volume ?? 500;
+          }
+
+          storyContainer.children.push(element);
         }
       }
 

vt/specs/video/background.yaml

@@ -0,0 +1,53 @@
+---
+title: "Video Background"
+description: Test video playback as background
+---
+l10n:
+  packages:
+    eklekfjwalefj:
+      label: English
+      lang: en
+      keys: {}
+
+screen:
+  width: 1920
+  height: 1080
+  backgroundColor: "#000000"
+
+resources:
+  layouts:
+    base1:
+      elements:
+        - id: bg-rect
+          type: rect
+          fill: "#000000"
+          width: 1920
+          height: 1080
+          click:
+            actionPayload:
+              actions:
+                nextLine: {}
+
+  videos:
+    video_sample_resource:
+      fileId: video_sample
+      width: 1920
+      height: 1080
+
+story:
+  initialSceneId: videoScene
+  scenes:
+    videoScene:
+      name: Video Scene
+      initialSectionId: videoSection
+      sections:
+        videoSection:
+          name: Video Section
+          lines:
+            - id: line1
+              actions:
+                base:
+                  resourceId: base1
+                background:
+                  resourceId: video_sample_resource
+                  resourceType: video

vt/specs/video/visual.yaml

@@ -0,0 +1,63 @@
+---
+title: "Video Visual"
+description: Test video playback as visual element
+---
+l10n:
+  packages:
+    eklekfjwalefj:
+      label: English
+      lang: en
+      keys: {}
+
+screen:
+  width: 1920
+  height: 1080
+  backgroundColor: "#000000"
+
+resources:
+  layouts:
+    base1:
+      elements:
+        - id: bg-rect
+          type: rect
+          fill: "#000000"
+          width: 1920
+          height: 1080
+          click:
+            actionPayload:
+              actions:
+                nextLine: {}
+
+  videos:
+    video_sample_resource:
+      fileId: video_sample
+      width: 1920
+      height: 1080
+
+  transforms:
+    centerPos:
+      x: 960
+      y: 540
+      anchorX: 0.5
+      anchorY: 0.5
+
+story:
+  initialSceneId: videoScene
+  scenes:
+    videoScene:
+      name: Video Scene
+      initialSectionId: videoSection
+      sections:
+        videoSection:
+          name: Video Section
+          lines:
+            - id: line1
+              actions:
+                base:
+                  resourceId: base1
+                visual:
+                  items:
+                    - id: video-visual
+                      resourceId: video_sample_resource
+                      resourceType: video
+                      transformId: centerPos

vt/static/main.js

@@ -12,7 +12,8 @@ import createRouteGraphics, {
   textRevealingPlugin,
   tweenPlugin,
   soundPlugin,
-} from "https://cdn.jsdelivr.net/npm/route-graphics@0.0.15/+esm"
+  videoPlugin,
+} from "https://cdn.jsdelivr.net/npm/route-graphics@0.0.16/+esm"
 
 const projectData = parse(window.yamlContent);
 
@@ -97,6 +98,10 @@ const init = async () => {
     "horizontal_idle_thumb": {
       url: "/public/horizontal_idle_thumb.png",
       type: "image/png"
+    },
+    "video_sample": {
+      url: "/public/video_sample.mp4",
+      type: "video/mp4"
     }
   };
 
@@ -113,7 +118,8 @@ const init = async () => {
       spritePlugin,
       sliderPlugin,
       containerPlugin,
-      textRevealingPlugin
+      textRevealingPlugin,
+      videoPlugin
     ],
     animations: [
       tweenPlugin