Svelte Media & Dimension Binding

Check out a free preview of the full Svelte course:
The "Media & Dimension Binding" Lesson is part of the full, Svelte course featured in this preview video. Here's what you'd learn in this lesson:

Rich demonstrates how to use the media elements binding in Svelte with both the audio and video elements, and how to use bindings to build a player.

Get Unlimited Access Now

Transcript from the "Media & Dimension Binding" Lesson

>> Another type of binding that might not be obvious because it's not a form element is the media element binding. And there's a bunch of different media element bindings, there's the current time, there's the volume, there's the post state. All of these things can be added to a media element.

[00:00:20] And there's quite a lot of markup in this tutorial, so if you wanna dive into it, then have a look at this in your own time. But for now, I'm just gonna go down here and click on the Show me button so that we can see what this actually looks like once we've added all of the bindings to this video element.

[00:00:42] And we bind it to the current time, we bind it to the duration, and we bind it to the post date, and we're using those to build the video player UI. Click anywhere on here, and the video will start. I can drag, rewind, and click to pause. Now, a nice thing about the media element bindings is that they're not just using native DOM events.

[00:01:06] They're actually using requestAnimationFrame, where applicable, so that the current time is updated 60 times a second as opposed to four times a second or thereabouts, which is what you get if you're using progress events on the media elements. I keep talking about media elements instead of video elements, because the same thing also works with audio elements.

[00:01:31] Something else that is occasionally quite useful, is to be able to get a binding to an element's dimensions. Every block-level element, which is to say things like divs, and paragraphs, and anything else that has the display code and block style, and can have a client with clientHeight offset with offsetHeight bindings collectively turned by mentioned bindings.

[00:01:55] Now, these are read-only. You can't set the value, and change the width and height of an element. But if the element's width and height changes naturally as a result of the CSS change or the user interacting with it somehow, then the value will go back up to the component.

[00:02:14] So here are our values inside our script block. Here's our marker, and what we want is to add some bindings to the div down here that will get printed inside this paragraph. So we're gonna add bind:clientWidth= (w), and bind:clientHeight = (h). And now if you edit this text, [SOUND] You'll see that the size here is changing automatically, and if we change the font size the same thing happens.

[00:02:55] The way that this works is, it actually adds an iframe inside the element. And then, it binds to that iframes window EventListener, which is a pretty clever technique, although you don't wanna have a huge number of iframes on your page to do this. So this is a binding that you should use sparingly.