arcodange/mediabunny
1
0
Fork 0
mirror of https://github.com/arcodange-org/mediabunny.git synced 2026-09-28 03:13:51 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/Vanilagy/metamuxer

Browse Source
This commit is contained in:
Vanilagy
2025-07-03 11:36:07 +02:00
parent a8fa2e4cec 12f14b1f66
commit 1071bf9d49
61 changed files with 1632 additions and 151 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/file-compression/file-compression.ts
+1 -1
View File
@@ -9,7 +9,7 @@ import {
QUALITY_VERY_LOW,
} from 'mediabunny';
import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
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;
examples/file-compression/index.html
+3 -3
View File
@@ -12,7 +12,7 @@
</head>
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
<h1 class="text-3xl font-bold text-teal-800 dark:text-teal-200 text-center">File compression example</h1>
<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">
@@ -21,7 +21,7 @@
</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="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
@@ -48,7 +48,7 @@
target="_blank"
class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
>
<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
<p>View source code</p>
</a>
</body>
examples/live-recording/index.html
+2 -2
View File
@@ -12,7 +12,7 @@
</head>
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
<h1 class="text-3xl font-bold text-orange-800 dark:text-orange-200 text-center">Live recording example</h1>
<h1 class="text-3xl font-bold text-orange-500 text-center">Live recording example</h1>
<p class="max-w-lg text-center">The live canvas state and your microphone input will be written into a fragmented MP4 file and live-streamed to a <code>&lt;video&gt;</code> element.</p>
<button id="toggle-button" class="rounded-lg bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 px-5 py-2 mt-4">
@@ -49,7 +49,7 @@
target="_blank"
class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
>
<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
<p>View source code</p>
</a>
</body>
examples/media-player/index.html
+11 -11
View File
@@ -12,7 +12,7 @@
</head>
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2 h-svh">
<h1 class="text-3xl font-bold text-purple-800 dark:text-purple-200 text-center">Media player example</h1>
<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">
@@ -21,7 +21,7 @@
</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="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
@@ -35,18 +35,18 @@
<div class="bg-zinc-900/50 absolute left-0 right-0 bottom-0 h-10 items-center flex m-2 rounded-lg text-white transition-opacity" id="controls" style="opacity: 0;">
<button class="p-2 group outline-none" id="play-button">
<div class="size-6 invert group-hover:scale-110">
<img src="../../assets/play-icon.svg" class="size-full" id="play-icon">
<img src="../../assets/pause-icon.svg" class="size-full" id="pause-icon" style="display: none;">
<img src="../../docs/assets/play-icon.svg" class="size-full" id="play-icon">
<img src="../../docs/assets/pause-icon.svg" class="size-full" id="pause-icon" style="display: none;">
</div>
</button>
<button class="p-2 ml-4 mr-1" id="volume-button">
<div class="size-6 invert group-hover:scale-110" id="volume-icon-wrapper">
<img src="../../assets/volume-off-icon.svg" class="size-full">
<img src="../../assets/volume-x-icon.svg" class="size-full">
<img src="../../assets/volume-0-icon.svg" class="size-full">
<img src="../../assets/volume-1-icon.svg" class="size-full">
<img src="../../assets/volume-2-icon.svg" class="size-full">
<img src="../../docs/assets/volume-off-icon.svg" class="size-full">
<img src="../../docs/assets/volume-x-icon.svg" class="size-full">
<img src="../../docs/assets/volume-0-icon.svg" class="size-full">
<img src="../../docs/assets/volume-1-icon.svg" class="size-full">
<img src="../../docs/assets/volume-2-icon.svg" class="size-full">
</div>
</button>
@@ -68,7 +68,7 @@
<button class="p-2 group outline-none" id="fullscreen-button">
<div class="size-6 invert group-hover:scale-110">
<img src="../../assets/fullscreen-icon.svg" class="size-full">
<img src="../../docs/assets/fullscreen-icon.svg" class="size-full">
</div>
</button>
</div>
@@ -84,7 +84,7 @@
target="_blank"
class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
>
<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
<p>View source code</p>
</a>
</body>
examples/media-player/media-player.ts
+1 -1
View File
@@ -8,7 +8,7 @@ import {
WrappedCanvas,
} from 'mediabunny';
import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
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;
examples/metadata-extraction/index.html
+3 -3
View File
@@ -12,7 +12,7 @@
</head>
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
<h1 class="text-3xl font-bold text-blue-800 dark:text-blue-200 text-center">Metadata extraction example</h1>
<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">
@@ -21,7 +21,7 @@
</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="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
@@ -41,7 +41,7 @@
target="_blank"
class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
>
<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
<p>View source code</p>
</a>
</body>
examples/metadata-extraction/metadata-extraction.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { Input, ALL_FORMATS, BlobSource } from 'mediabunny';
import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
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;
examples/procedural-generation/index.html
+3 -3
View File
@@ -12,7 +12,7 @@
</head>
<body class="flex flex-col items-center py-10 bg-zinc-50 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
<h1 class="text-3xl font-bold text-teal-800 dark:text-teal-200 text-center">Procedural generation example</h1>
<h1 class="text-3xl font-bold text-pink-500 text-center">Procedural generation example</h1>
<p class="max-w-lg text-center">Using Mediabunny, this page will procedurally generate a video of musical bouncing balls as fast as possible.</p>
<div class="flex flex-col gap-6 mt-8 w-full max-w-80">
@@ -38,7 +38,7 @@
<p id="error-element" class="text-red-500"></p>
<div class="w-full max-w-80 h-2 rounded-full bg-zinc-200 dark:bg-zinc-750 overflow-hidden" id="progress-bar-container" style="display: none;">
<div class="h-full bg-teal-500 w-0" id="progress-bar"></div>
<div class="h-full bg-pink-500 w-0" id="progress-bar"></div>
</div>
<p class="text-xs font-medium mt-1.5 tabular-nums" id="progress-text" style="display: none;"></p>
@@ -55,7 +55,7 @@
target="_blank"
class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-zinc-200 dark:bg-zinc-750 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-bl-xl"
>
<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
<p>View source code</p>
</a>
</body>
examples/thumbnail-generation/index.html
+3 -3
View File
@@ -12,7 +12,7 @@
</head>
<body class="flex flex-col items-center py-10 bg-gray-50 text-gray-800 dark:bg-zinc-900 dark:text-zinc-200 px-2">
<h1 class="text-3xl font-bold text-emerald-800 dark:text-emerald-200 text-center">Thumbnail generation example</h1>
<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">
@@ -21,7 +21,7 @@
</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="../../assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
<img src="../../docs/assets/download-icon.svg" class="opacity-30 group-hover:opacity-80 dark:invert">
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
@@ -41,7 +41,7 @@
target="_blank"
class="flex items-center gap-2 fixed top-0 right-0 py-2 px-5 bg-gray-200 dark:bg-zinc-750 hover:bg-gray-300 dark:hover:bg-zinc-700 rounded-bl-xl"
>
<img src="../../assets/github-mark.svg" class="size-6 dark:invert">
<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
<p>View source code</p>
</a>
</body>
examples/thumbnail-generation/thumbnail-generation.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { Input, ALL_FORMATS, BlobSource, CanvasSink } from 'mediabunny';
import SampleFileUrl from '../../assets/big-buck-bunny-trimmed.mp4';
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;