fix: make Audio and Video tags work with remote files

redotvideo · Mar 13, 2024 · 84a809c · 84a809c
1 parent 36cd521
commit 84a809c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/packages/2d/src/lib/components/Audio.ts b/packages/2d/src/lib/components/Audio.ts
@@ -1,4 +1,4 @@
-import {DependencyContext, PlaybackState} from '@motion-canvas/core';
+import {DependencyContext, PlaybackState, viaProxy} from '@motion-canvas/core';
 import {computed, nodeName} from '../decorators';
 import {Media, MediaProps} from './Media';
 
@@ -24,11 +24,12 @@ export class Audio extends Media {
 
   @computed()
   protected audio(): HTMLAudioElement {
-    const src = this.src();
+    const src = viaProxy(this.src());
     const key = `${this.key}/${src}`;
     let audio = Audio.pool[key];
     if (!audio) {
       audio = document.createElement('audio');
+      audio.crossOrigin = 'anonymous';
       audio.src = src;
       Audio.pool[key] = audio;
     }

diff --git a/packages/2d/src/lib/components/Video.ts b/packages/2d/src/lib/components/Video.ts
@@ -5,6 +5,7 @@ import {
   SerializedVector2,
   SignalValue,
   SimpleSignal,
+  viaProxy,
 } from '@motion-canvas/core';
 import {computed, initial, nodeName, signal} from '../decorators';
 import {DesiredLength} from '../partials';
@@ -81,11 +82,12 @@ export class Video extends Media {
 
   @computed()
   private video(): HTMLVideoElement {
-    const src = this.src();
+    const src = viaProxy(this.src());
     const key = `${this.key}/${src}`;
     let video = Video.pool[key];
     if (!video) {
       video = document.createElement('video');
+      video.crossOrigin = 'anonymous';
       video.src = src;
       Video.pool[key] = video;
     }