atmo.rsvp
some fixes
+21
-32
+21
-32
src/lib/components/VodPlayer.svelte
+21
-32
src/lib/components/VodPlayer.svelte
···
11
11
12
12
let hls: HlsType | null = null;
13
13
let plyr: PlyrType | null = null;
14
-
let hlsLoaded = false;
15
14
16
15
onMount(() => {
17
-
initPlyr();
16
+
init();
18
17
return () => {
19
18
hls?.destroy();
20
19
plyr?.destroy();
21
20
};
22
21
});
23
22
24
-
async function initPlyr() {
23
+
async function init() {
25
24
if (!videoEl) return;
26
25
27
26
try {
28
-
const { default: Plyr } = await import('plyr');
29
-
plyr = new Plyr(videoEl, {
30
-
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'fullscreen'],
31
-
ratio: '16:9'
32
-
});
33
-
// Load HLS source only when user clicks play
34
-
plyr.on('play', loadHls);
35
-
} catch {
36
-
error = true;
37
-
}
38
-
}
39
-
40
-
async function loadHls() {
41
-
if (!videoEl || hlsLoaded) return;
42
-
hlsLoaded = true;
43
-
44
-
try {
45
-
const { default: Hls } = await import('hls.js');
27
+
const [{ default: Plyr }, { default: Hls }] = await Promise.all([
28
+
import('plyr'),
29
+
import('hls.js')
30
+
]);
46
31
47
32
if (Hls.isSupported()) {
48
-
hls = new Hls({
49
-
maxBufferLength: 10,
50
-
maxMaxBufferLength: 30,
51
-
maxBufferSize: 30 * 1000 * 1000,
52
-
startLevel: 0,
53
-
});
33
+
hls = new Hls({ autoStartLoad: false });
54
34
hls.loadSource(playlistUrl);
55
35
hls.attachMedia(videoEl);
56
-
hls.on(Hls.Events.MANIFEST_PARSED, () => {
57
-
videoEl?.play();
58
-
});
59
36
hls.on(Hls.Events.ERROR, (_event, data) => {
60
37
if (data.fatal) {
61
38
if (data.type === Hls.ErrorTypes.NETWORK_ERROR) {
···
69
46
});
70
47
} else if (videoEl.canPlayType('application/vnd.apple.mpegurl')) {
71
48
videoEl.src = playlistUrl;
72
-
videoEl.play();
73
49
} else {
74
50
error = true;
51
+
return;
75
52
}
53
+
54
+
plyr = new Plyr(videoEl, {
55
+
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'settings', 'fullscreen'],
56
+
settings: ['speed'],
57
+
speed: { selected: 1, options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2] },
58
+
ratio: '16:9'
59
+
});
60
+
61
+
// When user clicks play, tell HLS to start loading segments
62
+
plyr.on('play', () => {
63
+
hls?.startLoad();
64
+
});
76
65
} catch {
77
66
error = true;
78
67
}
···
84
73
<p class="text-base-500 dark:text-base-400 text-sm">Failed to load video</p>
85
74
</div>
86
75
{:else}
87
-
<div class="border-base-300 dark:border-base-400/40 w-full max-w-full overflow-hidden rounded-xl border">
76
+
<div class="border-base-300 dark:border-base-400/40 aspect-video w-full max-w-full overflow-hidden rounded-xl border">
88
77
<video bind:this={videoEl} class="h-full w-full" aria-label={title}></video>
89
78
</div>
90
79
{/if}