31 lines
503 B
Svelte
31 lines
503 B
Svelte
<script lang="ts">
|
|
import videoUrl from '@assets/avsync.webm';
|
|
let paused = true;
|
|
</script>
|
|
|
|
<h2><i class="ti ti-time-duration-off"></i> 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;
|
|
|
|
&:not(.playing) {
|
|
opacity: 0.5;
|
|
filter: grayscale(0.8);
|
|
}
|
|
|
|
transition:
|
|
opacity 0.3s,
|
|
filter 0.3s;
|
|
}
|
|
</style>
|