your personal website on atproto - mirror
blento.app
flo-bit.dev
1<script lang="ts">
2 import { onMount } from 'svelte';
3 import Hls from 'hls.js';
4 import type { PostEmbedVideo } from '..';
5
6 const { data }: { data: PostEmbedVideo } = $props();
7
8 onMount(async () => {
9 const Plyr = (await import('plyr')).default;
10 if (Hls.isSupported()) {
11 var hls = new Hls();
12 hls.loadSource(data.video.playlist);
13 hls.attachMedia(element);
14 }
15
16 new Plyr(element, {
17 controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
18 ratio: data.video.aspectRatio
19 ? `${data.video.aspectRatio.width}:${data.video.aspectRatio.height}`
20 : '16:9'
21 });
22 });
23
24 let element: HTMLMediaElement;
25</script>
26
27<svelte:head>
28 <link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
29</svelte:head>
30
31<div
32 style={data.video.aspectRatio
33 ? `aspect-ratio: ${data.video.aspectRatio.width} / ${data.video.aspectRatio.height}`
34 : 'aspect-ratio: 16 / 9'}
35 class="border-base-300 dark:border-base-400/40 w-full max-w-full overflow-hidden rounded-2xl border"
36>
37 <video bind:this={element} class="h-full w-full" aria-label={data.video.alt}></video>
38</div>
39
40<style>
41 * {
42 --plyr-color-main: var(--color-accent-500);
43 }
44</style>