document new media element bindings

pull/3950/head
Rich Harris 6 years ago
parent a8ff02a25f
commit a4658e2d42

@ -563,12 +563,14 @@ Elements with the `contenteditable` attribute support `innerHTML` and `textConte
---
Media elements (`<audio>` and `<video>`) have their own set of bindings — four *readonly* ones...
Media elements (`<audio>` and `<video>`) have their own set of bindings — six *readonly* ones...
* `duration` (readonly) — the total duration of the video, in seconds
* `buffered` (readonly) — an array of `{start, end}` objects
* `seekable` (readonly) — ditto
* `played` (readonly) — ditto
* `seeking` (readonly) — boolean
* `ended` (readonly) — boolean
...and four *two-way* bindings:
@ -577,16 +579,22 @@ Media elements (`<audio>` and `<video>`) have their own set of bindings — four
* `paused` — this one should be self-explanatory
* `volume` — a value between 0 and 1
Videos additionally have readonly `videoWidth` and `videoHeight` bindings
```html
<video
src={clip}
bind:duration
bind:buffered
bind:seekable
bind:seeking
bind:played
bind:ended
bind:currentTime
bind:paused
bind:volume
bind:videoWidth
bind:videoHeight
></video>
```

@ -24,12 +24,14 @@ Now, when you click on the video, it will update `time`, `duration` and `paused`
> Ordinarily on the web, you would track `currentTime` by listening for `timeupdate` events. But these events fire too infrequently, resulting in choppy UI. Svelte does better — it checks `currentTime` using `requestAnimationFrame`.
The complete set of bindings for `<audio>` and `<video>` is as follows — four *readonly* bindings...
The complete set of bindings for `<audio>` and `<video>` is as follows — six *readonly* bindings...
* `duration` (readonly) — the total duration of the video, in seconds
* `buffered` (readonly) — an array of `{start, end}` objects
* `seekable` (readonly) — ditto
* `played` (readonly) — ditto
* `seeking` (readonly) — boolean
* `ended` (readonly) — boolean
...and four *two-way* bindings:
@ -37,3 +39,5 @@ The complete set of bindings for `<audio>` and `<video>` is as follows — four
* `playbackRate` — how fast to play the video, where `1` is 'normal'
* `paused` — this one should be self-explanatory
* `volume` — a value between 0 and 1
Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
Loading…
Cancel
Save