flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import { onMount } from 'svelte';
3 import Hls from 'hls.js';
4
5 const {
6 video
7 }: {
8 video: {
9 playlist: string;
10 thumbnail: string;
11 alt: string;
12 };
13 } = $props();
14
15 onMount(() => {
16 // Ensure muted is set programmatically (some browsers require this)
17 element.muted = true;
18
19 if (Hls.isSupported()) {
20 // Use hls.js for browsers that don't support HLS natively
21 const hls = new Hls();
22 hls.loadSource(video.playlist);
23 hls.attachMedia(element);
24 hls.on(Hls.Events.MANIFEST_PARSED, () => {
25 element.muted = true;
26 element.play().catch((e) => {
27 console.error('HLS play error:', e);
28 });
29 });
30 } else if (element.canPlayType('application/vnd.apple.mpegurl')) {
31 // Safari supports HLS natively
32 element.src = video.playlist;
33 element.addEventListener('canplay', () => {
34 element.muted = true;
35 element.play().catch((e) => {
36 console.error('Native HLS play error:', e);
37 });
38 });
39 }
40 });
41
42 let element: HTMLVideoElement;
43</script>
44
45<img src={video.thumbnail} class="absolute inset-0 -z-10 h-full w-full object-cover" alt="" />
46<video
47 bind:this={element}
48 muted
49 loop
50 autoplay
51 playsinline
52 class="absolute inset-0 h-full w-full object-cover"
53 aria-label={video.alt}
54></video>