32 lines
568 B
Svelte
32 lines
568 B
Svelte
<script lang="ts">
|
|
import videoUrl from '@assets/avsync.webm';
|
|
import { i18n } from '$lib/i18n';
|
|
let paused = true;
|
|
</script>
|
|
|
|
<h2><i class="ti ti-time-duration-off"></i> {$i18n.t('Audio/Video Synchronization')}</h2>
|
|
<!-- svelte-ignore a11y-media-has-caption -->
|
|
<video
|
|
class:playing={!paused}
|
|
autoplay
|
|
loop
|
|
bind:paused
|
|
src={videoUrl}
|
|
on:click={() => (paused = false)}
|
|
></video>
|
|
|
|
<style>
|
|
video {
|
|
flex-grow: 1;
|
|
min-height: 0;
|
|
|
|
&:not(.playing) {
|
|
opacity: 0.5;
|
|
filter: grayscale(0.8);
|
|
}
|
|
|
|
transition:
|
|
opacity 0.3s,
|
|
filter 0.3s;
|
|
}
|
|
</style>
|