Add remote URL option to examples

examples/media-player/media-player.ts

@@ -4,6 +4,7 @@ import {
 	BlobSource,
 	CanvasSink,
 	Input,
+	UrlSource,
 	WrappedAudioBuffer,
 	WrappedCanvas,
 } from 'mediabunny';
@@ -11,7 +12,8 @@ import {
 import SampleFileUrl from '../../docs/assets/big-buck-bunny-trimmed.mp4';
 (document.querySelector('#sample-file-download') as HTMLAnchorElement).href = SampleFileUrl;
 
-const selectMediaButton = document.querySelector('button') as HTMLButtonElement;
+const selectMediaButton = document.querySelector('#select-file') as HTMLButtonElement;
+const loadUrlButton = document.querySelector('#load-url') as HTMLButtonElement;
 const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
 const horizontalRule = document.querySelector('hr') as HTMLHRElement;
 const playerContainer = document.querySelector('#player') as HTMLDivElement;
@@ -66,7 +68,7 @@ let volumeMuted = false;
 
 /** === INIT LOGIC === */
 
-const initMediaPlayer = async (file: File) => {
+const initMediaPlayer = async (resource: File | string) => {
 	try {
 		// First, dispose any ongoing playback:
 
@@ -79,15 +81,18 @@ const initMediaPlayer = async (file: File) => {
 		asyncId++;
 
 		fileLoaded = false;
-		fileNameElement.textContent = file.name;
+		fileNameElement.textContent = resource instanceof File ? resource.name : resource;
 		horizontalRule.style.display = '';
 		playerContainer.style.display = 'none';
 		errorElement.textContent = '';
 		warningElement.textContent = '';
 
-		// Create an Input from the file
+		// Create an Input from the resource
+		const source = resource instanceof File
+			? new BlobSource(resource)
+			: new UrlSource(resource);
 		const input = new Input({
-			source: new BlobSource(file),
+			source,
 			formats: ALL_FORMATS,
 		});
 
@@ -597,6 +602,19 @@ selectMediaButton.addEventListener('click', () => {
 	fileInput.click();
 });
 
+loadUrlButton.addEventListener('click', () => {
+	const url = prompt(
+		'Please enter a URL of a media file. Note that it must support cross-origin requests, so have the right'
+		+ ' CORS headers set.',
+		'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+	);
+	if (!url) {
+		return;
+	}
+
+	void initMediaPlayer(url);
+});
+
 document.addEventListener('dragover', (event) => {
 	event.preventDefault();
 	event.dataTransfer!.dropEffect = 'copy';