More Complex Bindings with Svelte

Photo by John Barkiple on Unsplash

Svelte is an up and coming front end framework for developing front end web apps.

It’s simple to use and lets us create results fast.

In this article, we’ll look at how to use the bind directive outside of input elements.

Media Elements

We can use the bind directive with audio or video elements.

For instance, we can bind to various attributes of audio or video elements as follows:

<script>
let time = 0;
let duration = 0;
let paused = true;
</script>
<video 
  bind:currentTime={time}
  bind:duration
  bind:paused
  controls
  src='https://sample-videos.com/video123/mp4/240/big_buck_bunny_240p_30mb.mp4'
>
</video>
<p>{time}</p>
<p>{duration}</p>
<p>{paused}</p>

In the code above, we used the bind directive to bind to currentTime , duration , and paused properties of the DOM video element.

They’re all updated as the video is being played or paused if applicable.

6 of the bindings for the audio and video elements are read only, they’re:

• duration — length of the video in seconds
• buffered — array of {start, end} objects
• seekable — array of {start, end} objects