your personal website on atproto - mirror
blento.app
fix safari?
+22
-5
+22
-5
src/lib/cards/BlueskyMediaCard/Video.svelte
+22
-5
src/lib/cards/BlueskyMediaCard/Video.svelte
···
12
12
};
13
13
} = $props();
14
14
15
-
onMount(async () => {
15
+
onMount(() => {
16
+
// Ensure muted is set programmatically (some browsers require this)
17
+
element.muted = true;
18
+
16
19
if (Hls.isSupported()) {
17
-
var hls = new Hls();
20
+
// Use hls.js for browsers that don't support HLS natively
21
+
const hls = new Hls();
18
22
hls.loadSource(video.playlist);
19
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
+
});
20
39
}
21
-
22
-
element.play();
23
40
});
24
41
25
-
let element: HTMLMediaElement;
42
+
let element: HTMLVideoElement;
26
43
</script>
27
44
28
45
<img src={video.thumbnail} class="absolute inset-0 -z-10 h-full w-full object-cover" alt="" />