A BUNCH of HLS (and related) progress

- Add support for fMP4 segments
- Add initInput (supported by ISOBMFF and MPEG-TS)
- Input.isSupported()
- Refactored file size retrieval logic, the file size can now be retrieved alongside the first read.
- Add support for unsized UrlSources
- Add support for multiple trun boxes in a row for the same track (as the spec literally says lol)
- Add support for more M3U8 features
- Fix faulty line reader
- MPEG-TS improvements: support video parameters not in first packet, support better key frame detection, support extension PES packets without PTS
- Fix reorder buffer being 1 element too small
This commit is contained in:
Vanilagy
2026-02-20 19:56:20 +01:00
parent de84d78092
commit 68b3ae7155
73 changed files with 17552 additions and 967 deletions
+2 -2
View File
@@ -31,11 +31,11 @@
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
<p class="text-xs opacity-60 mt-2 mx-auto text-center max-w-[36rem]" id="file-name"></p>
<hr class="w-full max-w-96 my-4 border-zinc-300 dark:border-zinc-700" style="display: none;">
<p id="error-element" class="text-red-500"></p>
<p id="error-element" class="text-red-500 mx-auto text-center max-w-[36rem]"></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-emerald-500 w-0" id="progress-bar"></div>
+2 -2
View File
@@ -21,8 +21,8 @@
<hr class="w-full max-w-96 my-4 border-zinc-300 dark:border-zinc-700" style="display: none;">
<p id="error-element" class="text-red-500"></p>
<p id="warning-element" class="text-amber-500"></p>
<p id="error-element" class="text-red-500 mx-auto text-center max-w-[36rem]"></p>
<p id="warning-element" class="text-amber-500 mx-auto text-center max-w-[36rem]"></p>
<div class="flex gap-4" id="main-container" style="display: none;">
<div class="flex flex-col items-center">
+4 -4
View File
@@ -31,13 +31,13 @@
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
<p class="text-xs opacity-60 mt-2 mx-auto text-center max-w-[36rem]" id="file-name"></p>
<hr class="w-full max-w-96 my-4 border-zinc-300 dark:border-zinc-700" style="display: none;">
<p id="error-element" class="text-red-500"></p>
<p id="warning-element" class="text-amber-500 mb-1"></p>
<p id="loading-element" class="text-sm animate-pulse text-zinc-500" style="display: none;">Loading...</p>
<p id="error-element" class="text-red-500 mx-auto text-center max-w-[36rem]"></p>
<p id="warning-element" class="text-amber-500 mb-1 mx-auto text-center max-w-[36rem]"></p>
<p id="loading-element" class="text-sm animate-pulse text-zinc-500 mx-auto text-center max-w-[36rem]" style="display: none;">Loading...</p>
<div id="player" class="relative bg-black rounded-xl shrink min-h-14 min-w-0 w-full max-w-5xl overflow-hidden select-none" style="display: none;">
<canvas class="size-full object-contain" width="1280" height="720"></canvas>
+3 -3
View File
@@ -92,16 +92,16 @@ const initMediaPlayer = async (resource: File | string) => {
warningElement.textContent = '';
let input: Input;
if (typeof resource === 'string' && resource.endsWith('.m3u8')) {
if (typeof resource === 'string' && resource.includes('.m3u8')) {
const manifestInput = new ManifestInput({
entryPath: resource,
getSource: path => new UrlSource(path),
manifestFormats: ALL_MANIFEST_FORMATS,
mediaFormats: ALL_FORMATS,
});
const variant = (await manifestInput.getVariants())[0]!;
// const variant = (await manifestInput.getVariants())[0]!;
input = variant.toInput();// await manifestInput.toInput();
input = await manifestInput.toInput();
// https://test-streams.mux.dev/test_001/stream.m3u8
// https://test-streams.mux.dev/test_001/stream_1000k_48k_640x360_050.ts
+1 -1
View File
@@ -31,7 +31,7 @@
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
<p class="text-xs opacity-60 mt-2 mx-auto text-center max-w-[36rem]" id="file-name"></p>
<hr class="w-full max-w-96 my-4 border-zinc-300 dark:border-zinc-700" style="display: none;">
+2 -2
View File
@@ -35,7 +35,7 @@
<hr class="w-full max-w-96 my-6 border-zinc-300 dark:border-zinc-700" style="display: none;">
<p id="error-element" class="text-red-500"></p>
<p id="error-element" class="text-red-500 mx-auto text-center max-w-[36rem]"></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-pink-500 w-0" id="progress-bar"></div>
@@ -59,4 +59,4 @@
<p>View source code</p>
</a>
</body>
</html>
</html>
+2 -2
View File
@@ -31,11 +31,11 @@
</a>
</div>
<p class="text-xs opacity-60 mt-2" id="file-name"></p>
<p class="text-xs opacity-60 mt-2 mx-auto text-center max-w-[36rem]" id="file-name"></p>
<hr class="w-full max-w-96 my-4 border-gray-300 dark:border-zinc-700" style="display: none;">
<p id="error-element" class="text-red-500"></p>
<p id="error-element" class="text-red-500 mx-auto text-center max-w-[36rem]"></p>
<div id="thumbnail-container" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4"></div>
<a href="/" class="fixed top-0 left-0 flex gap-2 py-2 px-5 items-center">