javascript / intermediate
Snippet
Bidirektionale Bindungen für Media-Elemente
Svelte bietet integrierte Bindungen für Media-Eigenschaften wie currentTime und paused. Das Ändern dieser Variablen im Skript steuert automatisch die Videowiedergabe.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>let time = 0;let duration;let paused = true;</script><videobind:currentTime={time}bind:durationbind:pausedsrc="video.mp4"></video><button on:click={() => paused = !paused}>{paused ? 'Play' : 'Pause'}</button>
svelte
Erklärung
1
bind:currentTime={time}
Synchronisiert die aktuelle Abspielposition des Videos mit der Variablen 'time'.
2
bind:paused
Steuert direkt den Abspiel- oder Pausenzustand des Media-Elements.