You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.1 KiB
44 lines
1.1 KiB
2 years ago
|
<script>
|
||
|
|
import { onMount } from "svelte";
|
||
|
|
|
||
|
|
export let aspect_ratio = "16/9";
|
||
|
|
// source is deprecated since I use src everywhere now
|
||
|
|
export let source = "";
|
||
|
|
export let src = "";
|
||
|
|
export let content_type = "application/x-mpegURL";
|
||
|
|
export let poster;
|
||
|
|
export let preload="auto";
|
||
|
|
export let background_color = "var(--color-accent)";
|
||
|
|
export let controls = true;
|
||
|
|
export let autoplay = false;
|
||
|
|
export let muted = false;
|
||
|
|
export let loop = false;
|
||
|
|
let ready = false;
|
||
|
|
|
||
|
|
onMount(() => {
|
||
|
|
ready = true;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<video-player class="stacked" style="background: { background_color };">
|
||
|
|
<video class="layer" class:top={ready} src={ source || src }
|
||
|
|
style="--aspect-ratio: { aspect_ratio };"
|
||
|
|
autoplay={autoplay}
|
||
|
|
muted={muted}
|
||
|
|
poster={poster}
|
||
|
|
controls={controls}
|
||
|
|
loop={loop}
|
||
|
|
preload={preload}
|
||
|
|
id="video-player">
|
||
|
|
|
||
|
|
<source src={ source || src } type={ content_type}>
|
||
|
|
</video>
|
||
|
|
<layer class="layer" style="background: {background_color };" class:top={ !ready }>
|
||
|
|
{#if poster}
|
||
|
|
<img src={ poster }>
|
||
|
|
{:else}
|
||
|
|
|
||
|
|
{/if}
|
||
|
|
</layer>
|
||
|
|
</video-player>
|