diff --git a/src/App.tsx b/src/App.tsx
index 3449c70..afc46d5 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,16 +1,32 @@
-import { JSX, useEffect, useState } from "react";
+import { JSX, useEffect, useRef, useState } from "react";
 import VideoPlayer from "./video/VideoPlayer";
 import VideoPicker from "./video/VideoPicker";
 import Segment from "./segmenting/Segment";
 import SegmentList from "./segmenting/SegmentList";
+import { FFmpeg } from "@ffmpeg/ffmpeg";
 
 function App(): JSX.Element {
 	const [path, setPath] = useState<string>("");
 	const [segments, setSegments] = useState<Segment[]>([]);
+	const [loaded, setLoaded] = useState<boolean>(false);
+	const ffmpegRef = useRef(new FFmpeg());
 
-	const load = async () => {};
+	const load = async () => {
+		const baseURL =
+			"https://cdn.jsdelivr.net/npm/@ffmpeg/core@0.12.10/dist/umd";
+		const ffmpeg = ffmpegRef.current;
+		ffmpeg.on("log", ({ message }) => {
+			console.log(message);
+		});
+		// toBlobURL is used to bypass CORS issue, urls with the same
+		// domain can be used directly.
+		await ffmpeg.load();
+		setLoaded(true);
+	};
 
-	useEffect(() => {});
+	useEffect(() => {
+		load();
+	});
 
 	return (
 		<div id="app">