Bug 273103 – HTMLVideoElement "playing" event triggered unexpectedly

• Component: Media
• Status: RESOLVED FIXED

[Ethan]

Issue: "playing" event is emitted unexpectedly

Description: 
We observed that the "playing" event triggers before the video player is potentially playing (https://html.spec.whatwg.org/multipage/media.html#event-media-playing) on Safari browsers. This is obvious when the internet is slow and the video content takes a while to be downloaded. 

Observations:
1. Unlike other browsers, Safari does not resume video playback once the video player has downloaded enough data for both the current and future frames, denoted by a readyState of 3 and the emission of a 'canplay' event.
2. "playing" event triggers after the "canplay" event is emitted.
3. The video player only resumes playback once it estimates that users can play the video without any pauses. This is denoted by a readyState of 4, which corresponds to the emission of a 'canplaythrough' event.

Reproducible on Desktop Safari and IOS Safari with simple HTMLVideoElement and console logging the media events. (See the attached index.html)

[Ethan]

Created attachment 471059 [details]
test file

[Ethan]

Created attachment 471060 [details]
Screenshot

[Radar WebKit Bug Importer]

<rdar://problem/127267465>

[Jean-Yves Avenard [:jya]]

I'm not sure I understand what the problem ism and I think there's some confusion presents here.

`canplay` is fired when readyState is 3 (HAVE_FUTURE_DATA), HAVE_FUTURE_DATA only indicates at least one more frame than the current frame.

`canplaythrough` is emitted when readyState is 4 (HAVE_ENOUGH_DATA) which per spec indicates 
```
The user agent estimates that data is being fetched at a rate where the current playback position, if it were to advance at the element's playbackRate, would not overtake the available data before playback reaches the end of the media resource.
```

the player is to resume only when readyState is 4 after stalling (that is readyState when back to 2)

In your screen capture, we can see that after readyState reached HAVE_FUTURE_DATA, we have two `progress` event being fired: so the user agent is actively downloading content here. 

- we see that readyState reach the value of 3, `canplay` is fired as per spec [1]
- `progress` is fired as data was downloaded [2]
- `stalled` is fired, likely because decoding the next frame has completed and no new download was there (can't tell as there's no timestamps attached to this screen) [3]
- play() is called so `playing` is fired [4] as the paused attribute is now false.
- another `progress` event as above
- now readyState reaches 4 we have reached enough data for playback to start, as currentTime starts progressing `timeupdate` is fired [5]

There's nothing in the data provided indicated an incorrect behaviour that isn't following the specs.

Even if the readyState is 3, and the paused attribute is false (the `playing` event got fired:
```
Even if this event fires, the element might still not be potentially playing, e.g. if the element is paused for user interaction or paused for in-band content.
``` (that list isn't exhaustive as it's non-normative)

From your list of observations, I see nothing incorrect here and would need further description of what you believe is incorrect and what you were expecting instead.

If your bug report is:
"We observed that the "playing" event triggers before the video player is potentially playing (https://html.spec.whatwg.org/multipage/media.html#event-media-playing) on Safari browsers"

that is *not* a bug, this webkit is 100% per spec here as per [1]: readyState >= 3 and paused == false.
`playing` doesn't indicate that currentTime is progressing at this stage yet.


[1] https://html.spec.whatwg.org/multipage/media.html#event-media-playing
[2] https://html.spec.whatwg.org/multipage/media.html#event-media-progress
[3] https://html.spec.whatwg.org/multipage/media.html#event-media-stalled
[4] https://html.spec.whatwg.org/multipage/media.html#event-media-playing
[5] https://html.spec.whatwg.org/multipage/media.html#event-media-timeupdate

[Jean-Yves Avenard [:jya]]

Resolution: Need more information