From e1db502092dfaee0a0692570448224e0c6e9d517 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= Date: Tue, 16 Jun 2026 00:33:41 +0200 Subject: [PATCH] Add images to HTML event propagation --- web-integration/html__events.md | 8 +++++--- web-integration/images/network_states.svg | 4 ++++ web-integration/images/playback_states.svg | 4 ++++ web-integration/images/ready_states.svg | 4 ++++ 4 files changed, 17 insertions(+), 3 deletions(-) create mode 100644 web-integration/images/network_states.svg create mode 100644 web-integration/images/playback_states.svg create mode 100644 web-integration/images/ready_states.svg diff --git a/web-integration/html__events.md b/web-integration/html__events.md index e72d7e4..e85fc99 100644 --- a/web-integration/html__events.md +++ b/web-integration/html__events.md @@ -89,7 +89,8 @@ State transitions can trigger different events: - `error`, when due to an error the source cannot continue loading While in the `LOADING` state two other events are fired multiple times, `progress` and `stalled`, indicating whether the server is currently sending data or not. -![[network_states.svg]] + +![](./images/network_states.svg) #### The *ready* states They represent how much time of the video has been already loaded, potentially in relation to the current time position of the media element. They are exposed as the `.readyState` attribute of the media element. @@ -98,8 +99,8 @@ A video initially starts as `NOTHING`, and then as loading proceeded it transiti As the time duration changes (either due to the media element playing, or due to the user seeking around) the ready state can transition *back* to `FUTURE_DATA` or even to `CURRENT_DATA`, potentially leading to the `canplay` and `canplaytrhough` events being later fired again. The `loadedmetadata` and `loadeddata` events are fired at most once, unless the element is fully reset by loading a different source. +![](./images/ready_states.svg) -![[ready_states.svg]] #### The *playback* states They represent whether the video is currently playing or paused. These states are not actually exposed as a real enum-based state on the media element, but as separate attributes. @@ -111,7 +112,8 @@ A video can then be paused, either by the user clicking the "Pause" button, by t When a video reaches the end of the time duration and it's paused, an `ended` event will be fired: this can either happen naturally due to the video playing to its end, or due to seeking to the end. -![[playback_states.svg]] +![](./images/playback_states.svg) + #### Other actions and events A user agent can be required to *seek* at a new playback position , either through user action, by calling the `.fastSeek()` method, or by setting the `.currentTime` attribute. When this happens, the media element will fire a `seeking` event, a `timeupdate` event, and a `seeked` event. The playback state will continue as it was before seeking, potentially switching immediately after between `PLAYING` end `WAITING`, between `PAUSED` and `ENDED`, or from `PLAYING`/`WAITING` to `ENDED`. diff --git a/web-integration/images/network_states.svg b/web-integration/images/network_states.svg new file mode 100644 index 0000000..8aa3af6 --- /dev/null +++ b/web-integration/images/network_states.svg @@ -0,0 +1,4 @@ + + + +
EMPTY
EMPTY
NO_SOURCE
NO_SOURCE
LOADING
LOADING
IDLE
IDLE
When changing/removing the source, or calling .load()
When changing/removing...
When none of the sources is valid
When none of the source...
When a valid
source is found
When a valid...
When there is a loading error
When there is a loading...

Legend

Legend
STATE
STATE
Cause
Cause
event fired while in state
event fired w...
event fired during state change
event fired duri...
loadstart
loadstart
name
name
abort
abort
emptied
emptied
suspend / error
suspend / error
progress
progress
name
name
stalled
stalled
Under memory pressure
Under memory pressu...
\ No newline at end of file diff --git a/web-integration/images/playback_states.svg b/web-integration/images/playback_states.svg new file mode 100644 index 0000000..de2e9fa --- /dev/null +++ b/web-integration/images/playback_states.svg @@ -0,0 +1,4 @@ + + + +
PAUSED

Legend

STATE
Cause
event fired while in state
event fired during state change
name
name
ENDED
ended
Seeking
PLAYING
WAITING
Ready states
timeupdate
playing
waiting
waiting
playing
ended
play button / .play()
pause button / .pause()
play
pause
\ No newline at end of file diff --git a/web-integration/images/ready_states.svg b/web-integration/images/ready_states.svg new file mode 100644 index 0000000..fc2e8c2 --- /dev/null +++ b/web-integration/images/ready_states.svg @@ -0,0 +1,4 @@ + + + +
NOTHING
NOTHING

Legend

Legend
STATE
STATE
Cause
Cause
event fired while in state
event fired w...
event fired during state change
event fired duri...
name
name
name
name
METADATA
METADATA
CURRENT_DATA
CURRENT_DATA
FUTURE_DATA
FUTURE_DATA
ENOUGH_DATA
ENOUGH_DATA
loadedmetadata
loadedmeta...
loadeddata
loadeddata
canplay
canplay
canplaythrough
canplaythr...
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Loading
Playing faster than expected / seeking
Playing faster than...
Playing faster than expected / seeking
Playing faster than...
Playing faster than expected / seeking
Playing faster than...
\ No newline at end of file