From f1f5a62d260949e639f6f1d627faf6ec0d59efac Mon Sep 17 00:00:00 2001 From: Vanilagy <1696106+Vanilagy@users.noreply.github.com> Date: Sat, 30 Aug 2025 17:45:43 +0200 Subject: [PATCH] Add remote URL option to examples --- examples/file-compression/file-compression.ts | 32 +++++++++++++++---- examples/file-compression/index.html | 19 +++++++---- examples/media-player/index.html | 19 +++++++---- examples/media-player/media-player.ts | 28 +++++++++++++--- examples/metadata-extraction/index.html | 19 +++++++---- .../metadata-extraction.ts | 29 +++++++++++++---- examples/thumbnail-generation/index.html | 19 +++++++---- .../thumbnail-generation.ts | 29 +++++++++++++---- 8 files changed, 147 insertions(+), 47 deletions(-) diff --git a/examples/file-compression/file-compression.ts b/examples/file-compression/file-compression.ts index 7cd0118..7c5ea5f 100644 --- a/examples/file-compression/file-compression.ts +++ b/examples/file-compression/file-compression.ts @@ -2,6 +2,7 @@ import { Input, ALL_FORMATS, BlobSource, + UrlSource, Output, BufferTarget, Mp4OutputFormat, @@ -12,7 +13,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 progressBarContainer = document.querySelector('#progress-bar-container') as HTMLDivElement; @@ -25,11 +27,11 @@ const errorElement = document.querySelector('#error-element') as HTMLParagraphEl let currentConversion: Conversion | null = null; let currentIntervalId = -1; -const compressFile = async (file: File) => { +const compressFile = async (resource: File | string) => { clearInterval(currentIntervalId); await currentConversion?.cancel(); - fileNameElement.textContent = file.name; + fileNameElement.textContent = resource instanceof File ? resource.name : resource; horizontalRule.style.display = ''; progressBarContainer.style.display = ''; speedometer.style.display = ''; @@ -39,12 +41,17 @@ const compressFile = async (file: File) => { errorElement.textContent = ''; try { - // Create a new input from the file + // Create a new 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, // Accept all formats }); + const fileSize = await source.getSize(); + // Define the output file const output = new Output({ target: new BufferTarget(), @@ -96,7 +103,7 @@ const compressFile = async (file: File) => { compressionFacts.style.display = ''; compressionFacts.textContent - = `${(output.target.buffer!.byteLength / file.size * 100).toPrecision(3)}% of original size`; + = `${(output.target.buffer!.byteLength / fileSize * 100).toPrecision(3)}% of original size`; } catch (error) { console.error(error); @@ -130,6 +137,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 compressFile(url); +}); + document.addEventListener('dragover', (event) => { event.preventDefault(); event.dataTransfer!.dropEffect = 'copy'; diff --git a/examples/file-compression/index.html b/examples/file-compression/index.html index 6ec1051..8a788d6 100644 --- a/examples/file-compression/index.html +++ b/examples/file-compression/index.html @@ -15,15 +15,22 @@

File compression example

Select or drop a media file, and Mediabunny will convert it to a heavily-compressed MP4 file.

-
- +
+
+ - - + +
+ + + Download sample file
+

diff --git a/examples/media-player/index.html b/examples/media-player/index.html index 17eaa76..6a02964 100644 --- a/examples/media-player/index.html +++ b/examples/media-player/index.html @@ -15,15 +15,22 @@

Media player example

Select or drop a media file, and a fully custom, Mediabunny-powered player will appear.

-
- +
+
+ - - + +
+ + + Download sample file
+

diff --git a/examples/media-player/media-player.ts b/examples/media-player/media-player.ts index 3c84c89..6a676ee 100644 --- a/examples/media-player/media-player.ts +++ b/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'; diff --git a/examples/metadata-extraction/index.html b/examples/metadata-extraction/index.html index 35d45d8..e6deed9 100644 --- a/examples/metadata-extraction/index.html +++ b/examples/metadata-extraction/index.html @@ -15,15 +15,22 @@

Metadata extraction example

Select or drop a media file, and Mediabunny will start extracting various metadata about that file.

-
- +
+
+ - - + +
+ + + Download sample file
+

diff --git a/examples/metadata-extraction/metadata-extraction.ts b/examples/metadata-extraction/metadata-extraction.ts index f2d3fa8..792f312 100644 --- a/examples/metadata-extraction/metadata-extraction.ts +++ b/examples/metadata-extraction/metadata-extraction.ts @@ -1,18 +1,22 @@ -import { Input, ALL_FORMATS, BlobSource } from 'mediabunny'; +import { Input, ALL_FORMATS, BlobSource, UrlSource } from 'mediabunny'; 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 bytesReadElement = document.querySelector('#bytes-read') as HTMLParagraphElement; const metadataContainer = document.querySelector('#metadata-container') as HTMLDivElement; -const extractMetadata = (file: File) => { - // Create a new input from the file +const extractMetadata = (resource: File | string) => { + // Create a new 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, // Accept all formats }); @@ -78,7 +82,7 @@ const extractMetadata = (file: File) => { }))), }; - fileNameElement.textContent = file.name; + fileNameElement.textContent = resource instanceof File ? resource.name : resource; horizontalRule.style.display = ''; bytesReadElement.innerHTML = ''; metadataContainer.innerHTML = ''; @@ -170,6 +174,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; + } + + extractMetadata(url); +}); + document.addEventListener('dragover', (event) => { event.preventDefault(); event.dataTransfer!.dropEffect = 'copy'; diff --git a/examples/thumbnail-generation/index.html b/examples/thumbnail-generation/index.html index dcda928..1ddd0d4 100644 --- a/examples/thumbnail-generation/index.html +++ b/examples/thumbnail-generation/index.html @@ -15,15 +15,22 @@

Thumbnail generation example

Select or drop a media file, and Mediabunny will extract video thumbnails for it.

-
- +
+
+ - - + +
+ + + Download sample file
+

diff --git a/examples/thumbnail-generation/thumbnail-generation.ts b/examples/thumbnail-generation/thumbnail-generation.ts index 7ed09ee..faacc02 100644 --- a/examples/thumbnail-generation/thumbnail-generation.ts +++ b/examples/thumbnail-generation/thumbnail-generation.ts @@ -1,9 +1,10 @@ -import { Input, ALL_FORMATS, BlobSource, CanvasSink } from 'mediabunny'; +import { Input, ALL_FORMATS, BlobSource, UrlSource, CanvasSink } from 'mediabunny'; 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 thumbnailContainer = document.querySelector('#thumbnail-container') as HTMLDivElement; @@ -12,16 +13,19 @@ const errorElement = document.querySelector('#error-element') as HTMLParagraphEl const THUMBNAIL_COUNT = 16; const THUMBNAIL_SIZE = 200; -const generateThumbnails = async (file: File) => { - fileNameElement.textContent = file.name; +const generateThumbnails = async (resource: File | string) => { + fileNameElement.textContent = resource instanceof File ? resource.name : resource; horizontalRule.style.display = ''; errorElement.textContent = ''; thumbnailContainer.innerHTML = ''; try { - // Create a new input from the file + // Create a new 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, // Accept all formats }); @@ -122,6 +126,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 generateThumbnails(url); +}); + document.addEventListener('dragover', (event) => { event.preventDefault(); event.dataTransfer!.dropEffect = 'copy';