javascript / intermediate
Snippet
Bi-directional Media Element Bindings
Svelte offers built-in bindings for media properties like currentTime and paused. Changing these variables in script automatically controls the video playback.
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
Breakdown
1
bind:currentTime={time}
Syncs the video's current playback position with the 'time' variable.
2
bind:paused
Directly controls the play/pause state of the media element.