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

Add example icons & colors

Browse Source
This commit is contained in:
Vanilagy
2025-06-30 21:28:34 +02:00
parent 3d4fece772
commit 168fca1f55
14 changed files with 32 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/file-compression/index.html
+1 -1
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">
examples/live-recording/index.html
+1 -1
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">
examples/media-player/index.html
+1 -1
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">
examples/metadata-extraction/index.html
+1 -1
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">
examples/procedural-generation/index.html
+1 -1
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">
examples/thumbnail-generation/index.html
+1 -1
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">