Remove all video files and use github instead

Author: jeromewu

apps/website/static/asset/ffmpegwasm-arch.drawio renamed to apps/website/assets/ffmpegwasm-arch.drawio

@@ -14,7 +14,7 @@ import FileSystemManager from "./FileSystemManager";
 import { SAMPLE_FILES } from "../const";
 import Editor from "./Editor";
 
-const defaultArgs = JSON.stringify(["-i", "video.avi", "video.mp4"], null, 2);
+const defaultArgs = JSON.stringify(["-i", "video.webm", "video.mp4"], null, 2);
 
 interface WorkspaceProps {
   ffmpeg: MutableRefObject<FFmpeg>;

apps/website/src/components/Playground/Workspace/index.tsx

@@ -12,6 +12,6 @@ export const CORE_SIZE = {
 };
 
 export const SAMPLE_FILES = {
-  "video.avi":
-    "https://raw.githubusercontent.com/ffmpegwasm/testdata/master/video-3s.avi",
+  "video.webm":
+    "https://raw.githubusercontent.com/ffmpegwasm/testdata/master/Big_Buck_Bunny_180_10s.webm",
 };

apps/website/src/components/Playground/const.ts

@@ -30,16 +30,15 @@ development!
 
 <div style={{ height: 32 }} />
 
+:::tip
+Demo Video: [https://youtu.be/F01B0fV20QA](https://youtu.be/F01B0fV20QA)
+:::
+
 ## How to Use :rocket:
 
 > It is recommended to read [Overview](/docs/overview) first to learn
 ffmpeg.wasm fundamentals.
 
-Demo Video:
-<video width="100%" controls>
-  <source src="/video/playground-how-to.mp4" type="video/mp4" />
-</video>
-
 A typical flow to use ffmpeg.wasm is:
 
 #### Download and load JavaScript & WebAssembly assets