mirror of
https://github.com/arcodange-org/mediabunny.git
synced 2026-09-27 02:43:48 +02:00
142 lines
7.1 KiB
HTML
142 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US" translate="no">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HLS transcoding example | Mediabunny</title>
|
|
<meta name="description" content="Select a directory, then a video. Mediabunny will create a complete HLS VOD package with five video renditions and one audio track.">
|
|
<script type="module" src="../base.ts"></script>
|
|
<script type="module" src="./hls-transcoding.ts"></script>
|
|
<link rel="stylesheet" href="../base.css">
|
|
<link rel="icon" href="../../docs/public/mediabunny-logo.svg">
|
|
<link rel="canonical" href="https://mediabunny.dev/examples/hls-transcoding/">
|
|
<meta property="og:site_name" content="Mediabunny">
|
|
<meta property="og:type" content="website">
|
|
<meta property="og:title" content="HLS transcoding example | Mediabunny">
|
|
<meta property="og:description" content="Select a directory, then a video. Mediabunny will create a complete HLS VOD package with five video renditions and one audio track.">
|
|
<meta property="og:url" content="https://mediabunny.dev/examples/hls-transcoding/">
|
|
<meta property="og:image" content="https://mediabunny.dev/mediabunny-og-image.png">
|
|
<meta property="og:locale" content="en-US">
|
|
<meta name="twitter:card" content="summary_large_image">
|
|
<meta name="twitter:site" content="@vanilagy">
|
|
<meta name="twitter:title" content="HLS transcoding example | Mediabunny">
|
|
<meta name="twitter:description" content="Select a directory, then a video. Mediabunny will create a complete HLS VOD package with five video renditions and one audio track.">
|
|
<meta name="twitter:image" content="https://mediabunny.dev/mediabunny-og-image.png">
|
|
<script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Examples","item":"https://mediabunny.dev/examples"},{"@type":"ListItem","position":2,"name":"HLS transcoding"}]}</script>
|
|
</head>
|
|
|
|
<body class="flex flex-col items-center bg-zinc-50 px-2 py-10 text-zinc-800 dark:bg-zinc-900 dark:text-zinc-200">
|
|
<h1 class="text-center text-3xl font-bold text-cyan-500">HLS transcoding example</h1>
|
|
<p class="max-w-2xl text-center">
|
|
Select a directory, then a video. Mediabunny will create a complete HLS VOD package with five video renditions and one audio track.
|
|
</p>
|
|
|
|
<div class="mt-5 flex flex-col items-center gap-1">
|
|
<div class="flex flex-wrap justify-center gap-2">
|
|
<button id="select-directory" class="rounded-lg bg-cyan-500 px-5 py-2 font-medium text-white hover:bg-cyan-600">
|
|
Select directory
|
|
</button>
|
|
|
|
<button id="select-file" disabled class="rounded-lg bg-zinc-200 px-5 py-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-zinc-750 dark:hover:bg-zinc-700 hover:bg-zinc-300">
|
|
Select local file
|
|
</button>
|
|
|
|
<button id="load-sample" disabled class="rounded-lg bg-zinc-200 px-5 py-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-zinc-750 dark:hover:bg-zinc-700 hover:bg-zinc-300">
|
|
Load remote URL
|
|
</button>
|
|
</div>
|
|
|
|
<a id="sample-file-download" download="big-buck-bunny-trimmed.mp4" class="text-xs opacity-50 hover:opacity-70 hover:underline">
|
|
Download sample file
|
|
</a>
|
|
</div>
|
|
|
|
<p id="directory-name" class="mt-3 max-w-[36rem] text-center text-xs opacity-60" style="display: none;"></p>
|
|
<p id="file-name" class="min-h-5 max-w-[36rem] text-center text-xs opacity-60"></p>
|
|
<p id="error-element" class="mx-auto mt-2 max-w-[36rem] text-center text-red-500"></p>
|
|
|
|
<hr class="my-4 w-full max-w-4xl border-zinc-300 dark:border-zinc-700">
|
|
|
|
<div class="grid w-full max-w-4xl gap-4 md:grid-cols-2">
|
|
<section class="rounded-xl bg-zinc-200 p-5 dark:bg-zinc-750">
|
|
<h2 class="text-lg font-bold text-cyan-500">Renditions</h2>
|
|
<div class="mt-3 grid gap-2 text-sm">
|
|
<div class="grid grid-cols-[5rem_1fr] rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800">
|
|
<p class="font-bold">1080p</p>
|
|
<p class="opacity-70">AVC video</p>
|
|
</div>
|
|
<div class="grid grid-cols-[5rem_1fr] rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800">
|
|
<p class="font-bold">720p</p>
|
|
<p class="opacity-70">AVC video</p>
|
|
</div>
|
|
<div class="grid grid-cols-[5rem_1fr] rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800">
|
|
<p class="font-bold">480p</p>
|
|
<p class="opacity-70">AVC video</p>
|
|
</div>
|
|
<div class="grid grid-cols-[5rem_1fr] rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800">
|
|
<p class="font-bold">360p</p>
|
|
<p class="opacity-70">AVC video</p>
|
|
</div>
|
|
<div class="grid grid-cols-[5rem_1fr] rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800">
|
|
<p class="font-bold">240p</p>
|
|
<p class="opacity-70">AVC video</p>
|
|
</div>
|
|
<hr class="my-1 border-zinc-300 dark:border-zinc-700">
|
|
<div class="grid grid-cols-[5rem_1fr] rounded-lg bg-zinc-100 px-3 py-2 dark:bg-zinc-800">
|
|
<p class="font-bold">Audio</p>
|
|
<p class="opacity-70">AAC audio</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="dashboard" class="rounded-xl bg-zinc-200 p-5 opacity-50 transition-opacity dark:bg-zinc-750">
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h2 class="text-lg font-bold text-cyan-500">Progress</h2>
|
|
<p id="status" class="mt-1 text-sm opacity-70">Waiting for directory</p>
|
|
</div>
|
|
<p id="percent-indicator" class="text-4xl font-bold tabular-nums text-cyan-500">0%</p>
|
|
</div>
|
|
|
|
<div id="progress-bar-container" class="mt-4 h-3 overflow-hidden rounded-full bg-zinc-300 dark:bg-zinc-900">
|
|
<div id="progress-bar" class="h-full w-0 bg-emerald-500 transition-[width] duration-150"></div>
|
|
</div>
|
|
|
|
<div class="mt-4 grid grid-cols-2 gap-2 text-sm">
|
|
<div class="rounded-lg bg-zinc-100 p-3 dark:bg-zinc-800">
|
|
<p class="text-xs opacity-60">Real-time speed</p>
|
|
<p id="speedometer" class="mt-1 text-lg font-bold tabular-nums">-</p>
|
|
</div>
|
|
<div class="rounded-lg bg-zinc-100 p-3 dark:bg-zinc-800">
|
|
<p class="text-xs opacity-60">Bytes written</p>
|
|
<p id="bytes-written" class="mt-1 text-lg font-bold tabular-nums">0 B</p>
|
|
</div>
|
|
<div class="rounded-lg bg-zinc-100 p-3 dark:bg-zinc-800">
|
|
<p class="text-xs opacity-60">Files created</p>
|
|
<p id="files-created" class="mt-1 text-lg font-bold tabular-nums">0</p>
|
|
</div>
|
|
<div class="rounded-lg bg-zinc-100 p-3 dark:bg-zinc-800">
|
|
<p class="text-xs opacity-60">Latest file</p>
|
|
<p id="latest-file" class="mt-1 truncate text-lg font-bold tabular-nums">-</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<a href="/" class="fixed left-0 top-0 flex items-center gap-2 px-5 py-2">
|
|
<img src="../../docs/public/mediabunny-logo.svg" class="size-6">
|
|
<p class="text-sm font-medium">Mediabunny</p>
|
|
</a>
|
|
|
|
<a
|
|
href="https://github.com/Vanilagy/mediabunny/tree/main/examples/hls-transcoding"
|
|
target="_blank"
|
|
class="fixed right-0 top-0 flex items-center gap-2 rounded-bl-xl bg-zinc-200 px-5 py-2 hover:bg-zinc-300 dark:bg-zinc-750 dark:hover:bg-zinc-700"
|
|
>
|
|
<img src="../../docs/assets/github-mark.svg" class="size-6 dark:invert">
|
|
<p>View source code</p>
|
|
</a>
|
|
</body>
|
|
</html>
|