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 * `duration` (readonly) — the total duration of the video, in seconds
* `buffered` (readonly) — an array of `{start, end}` objects * `buffered` (readonly) — an array of `{start, end}` objects
* `seekable` (readonly) — ditto * `seekable` (readonly) — ditto
* `played` (readonly) — ditto * `played` (readonly) — ditto
* `seeking` (readonly) — boolean
* `ended` (readonly) — boolean
...and four *two-way* bindings: ...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 * `paused` — this one should be self-explanatory
* `volume` — a value between 0 and 1 * `volume` — a value between 0 and 1
Videos additionally have readonly `videoWidth` and `videoHeight` bindings
```html ```html
<video <video
src={clip} src={clip}
bind:duration bind:duration
bind:buffered bind:buffered
bind:seekable bind:seekable
bind:seeking
bind:played bind:played
bind:ended
bind:currentTime bind:currentTime
bind:paused bind:paused
bind:volume bind:volume
bind:videoWidth
bind:videoHeight
></video> ></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`. > 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 * `duration` (readonly) — the total duration of the video, in seconds
* `buffered` (readonly) — an array of `{start, end}` objects * `buffered` (readonly) — an array of `{start, end}` objects
* `seekable` (readonly) — ditto * `seekable` (readonly) — ditto
* `played` (readonly) — ditto * `played` (readonly) — ditto
* `seeking` (readonly) — boolean
* `ended` (readonly) — boolean
...and four *two-way* bindings: ...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' * `playbackRate` — how fast to play the video, where `1` is 'normal'
* `paused` — this one should be self-explanatory * `paused` — this one should be self-explanatory
* `volume` — a value between 0 and 1 * `volume` — a value between 0 and 1
Videos additionally have readonly `videoWidth` and `videoHeight` bindings.
Loading…
Cancel
Save