arcodange/mediabunny
1
0
Fork 0
mirror of https://github.com/arcodange-org/mediabunny.git synced 2026-09-27 10:53:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add remote URL option to examples

Browse Source
This commit is contained in:
Vanilagy
2025-08-30 17:45:43 +02:00
parent 64ad054102
commit f1f5a62d26
8 changed files with 147 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/file-compression/file-compression.ts
+26 -6
View File
@@ -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';
examples/file-compression/index.html
+13 -6
View File
@@ -15,15 +15,22 @@
<h1 class="text-3xl font-bold text-teal-500 text-center">File compression example</h1>
<p class="max-w-lg text-center">Select or drop a media file, and Mediabunny will convert it to a heavily-compressed MP4 file.</p>
<div class="flex gap-2 mt-4">
<button class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
Select media file
</button>
<div class="flex flex-col items-center gap-1">
<div class="flex gap-2 mt-4">
<button id="select-file" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
Select local file
</button>
<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
<button id="load-url" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
Load remote URL
</button>
</div>
<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="hover:underline text-xs opacity-50 hover:opacity-70">
Download sample file
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
<hr class="w-full max-w-96 my-4 border-zinc-300 dark:border-zinc-700" style="display: none;">
examples/media-player/index.html
+13 -6
View File
@@ -15,15 +15,22 @@
<h1 class="text-3xl font-bold text-purple-500 text-center">Media player example</h1>
<p class="max-w-lg text-center">Select or drop a media file, and a fully custom, Mediabunny-powered player will appear.</p>
<div class="flex gap-2 mt-4">
<button class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
Select media file
</button>
<div class="flex flex-col items-center gap-1">
<div class="flex gap-2 mt-4">
<button id="select-file" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
Select local file
</button>
<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
<button id="load-url" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
Load remote URL
</button>
</div>
<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="hover:underline text-xs opacity-50 hover:opacity-70">
Download sample file
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
<hr class="w-full max-w-96 my-4 border-zinc-300 dark:border-zinc-700" style="display: none;">
examples/media-player/media-player.ts
+23 -5
View File
@@ -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';
examples/metadata-extraction/index.html
+13 -6
View File
@@ -15,15 +15,22 @@
<h1 class="text-3xl font-bold text-blue-500 text-center">Metadata extraction example</h1>
<p class="max-w-lg text-center">Select or drop a media file, and Mediabunny will start extracting various metadata about that file.</p>
<div class="flex gap-2 mt-4">
<button class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
Select media file
</button>
<div class="flex flex-col items-center gap-1">
<div class="flex gap-2 mt-4">
<button id="select-file" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
Select local file
</button>
<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
<button id="load-url" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2">
Load remote URL
</button>
</div>
<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="hover:underline text-xs opacity-50 hover:opacity-70">
Download sample file
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
<hr class="w-full max-w-96 my-4 border-zinc-300 dark:border-zinc-700" style="display: none;">
examples/metadata-extraction/metadata-extraction.ts
+23 -6
View File
@@ -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';
examples/thumbnail-generation/index.html
+13 -6
View File
@@ -15,15 +15,22 @@
<h1 class="text-3xl font-bold text-green-500 text-center">Thumbnail generation example</h1>
<p class="max-w-lg text-center">Select or drop a media file, and Mediabunny will extract video thumbnails for it.</p>
<div class="flex gap-2 mt-4">
<button class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 py-2">
Select media file
</button>
<div class="flex flex-col items-center gap-1">
<div class="flex gap-2 mt-4">
<button id="select-file" class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 py-2">
Select local file
</button>
<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 group grid place-items-center" title="Download sample file">
<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
<button id="load-url" class="rounded-lg bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 px-5 py-2">
Load remote URL
</button>
</div>
<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="hover:underline text-xs opacity-50 hover:opacity-70">
Download sample file
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
<hr class="w-full max-w-96 my-4 border-gray-300 dark:border-zinc-700" style="display: none;">
examples/thumbnail-generation/thumbnail-generation.ts
+23 -6
View File
@@ -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';