This is the template project that's checked out and configured when you run the bando-up command from ljsthw-bandolier. This is where the code really lives.
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.
bandolier-template/client/components/Video.svelte

44 lines
1.1 KiB

<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}
&nbsp;
{/if}
</layer>
</video-player>