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

Add loading element to media player

Browse Source
This commit is contained in:
Vanilagy
2025-08-30 17:50:53 +02:00
parent f1f5a62d26
commit 3dec3ab12b
2 changed files with 5 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/media-player/index.html
+1
View File
@@ -37,6 +37,7 @@
<p id="error-element" class="text-red-500"></p> <p id="error-element" class="text-red-500"></p>
<p id="warning-element" class="text-amber-500 mb-1"></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>
<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;"> <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> <canvas class="size-full object-contain" width="1280" height="720"></canvas>
examples/media-player/media-player.ts
+4
View File
@@ -16,6 +16,7 @@ const selectMediaButton = document.querySelector('#select-file') as HTMLButtonEl
const loadUrlButton = document.querySelector('#load-url') as HTMLButtonElement; const loadUrlButton = document.querySelector('#load-url') as HTMLButtonElement;
const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement; const fileNameElement = document.querySelector('#file-name') as HTMLParagraphElement;
const horizontalRule = document.querySelector('hr') as HTMLHRElement; const horizontalRule = document.querySelector('hr') as HTMLHRElement;
const loadingElement = document.querySelector('#loading-element') as HTMLParagraphElement;
const playerContainer = document.querySelector('#player') as HTMLDivElement; const playerContainer = document.querySelector('#player') as HTMLDivElement;
const canvas = document.querySelector('canvas') as HTMLCanvasElement; const canvas = document.querySelector('canvas') as HTMLCanvasElement;
const controlsElement = document.querySelector('#controls') as HTMLDivElement; const controlsElement = document.querySelector('#controls') as HTMLDivElement;
@@ -83,6 +84,7 @@ const initMediaPlayer = async (resource: File | string) => {
fileLoaded = false; fileLoaded = false;
fileNameElement.textContent = resource instanceof File ? resource.name : resource; fileNameElement.textContent = resource instanceof File ? resource.name : resource;
horizontalRule.style.display = ''; horizontalRule.style.display = '';
loadingElement.style.display = '';
playerContainer.style.display = 'none'; playerContainer.style.display = 'none';
errorElement.textContent = ''; errorElement.textContent = '';
warningElement.textContent = ''; warningElement.textContent = '';
@@ -183,6 +185,7 @@ const initMediaPlayer = async (resource: File | string) => {
await play(); await play();
} }
loadingElement.style.display = 'none';
playerContainer.style.display = ''; playerContainer.style.display = '';
if (!videoSink) { if (!videoSink) {
@@ -194,6 +197,7 @@ const initMediaPlayer = async (resource: File | string) => {
console.error(error); console.error(error);
errorElement.textContent = String(error); errorElement.textContent = String(error);
loadingElement.style.display = 'none';
playerContainer.style.display = 'none'; playerContainer.style.display = 'none';
} }
}; };