Sprints: Refactor media events

Created on 6 Feb 2019 · 7Comments · Source: mdn/sprints

This is a work item for #685.

HTMLMediaElement Events

For HTMLMediaElement pages:

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/XXX_event
[X] - translations checked
[ ] - Related events is removed. NOT DOING THIS. STAYS FOR NOW
[X] - "see also" is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[X] - {{APIRef("HTMLMediaElement")}}
[X] - first sentence is summary
[X] - general information moved to blue box syntax
[X] - Examples (Did all video, rather than any audio)
[X] - specification table (w3c and whatwg)
[X] - BCD - https://github.com/mdn/browser-compat-data/pull/3564
[X] - link to bcd

Add links to all events from:

Acceptance Criteria:

All check boxes checked for being either: done, won't fix, or put into new tasks.

Source

Elchi3

Most helpful comment

Thanks for bringing this up, @SphinxKnight :+1:

You're on point here, the move was supposed to go to the Web/API/ tree not the Web/HTML/ tree.
For determining the target interface where to put this, I'm double-checking with the specs as these old MDN event docs can be wrong. I think the relevant spec for media events is this one: https://html.spec.whatwg.org/multipage/media.html#mediaevents and there it says "The following events fire on media elements" which refers to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement

So, https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event would be correct here, I believe.

Does all this make sense to you, @estelle?

Elchi3 on 20 Feb 2019

👍2

All 7 comments

I'm taking the liberty to report here, please let me know if this irrelevant/wrong.
Regarding the playing event, there are now 3 pages under the HTML:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/playing_event (the original page which has been moved)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/playing (a newly created page)
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/playingevent (a newly created page)
Those seem to be duplicates.

Moreover, if I correctly understood Will's procedure and the target of this event, those pages should be located under
https://developer.mozilla.org/en-US/docs/Web/API/Element (or https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement if the rule is not to be taken literally).

I understand time's a finite resource for everyone and that this just occurred yesterday and may perfectly be a temporary situation, however I would be grateful if such a work in progress could be flagged on the page (e.g. using the {{Draft}} macro or any similar tag/macro).

Thanks a lot in advance and "bon courage" with all this work of refactoring :)

SphinxKnight on 20 Feb 2019

👍2

Thanks for bringing this up, @SphinxKnight :+1:

So, https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event would be correct here, I believe.

Does all this make sense to you, @estelle?

Elchi3 on 20 Feb 2019

👍2

The triplicate issue should not have happened, but my understading is that these events are event on the HTML Media elements of

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events are the events.

The listeners are written as:

var vid1 = document.getElementsByTagName("video")[0];
vid1.addEventListener("seeked", function() { console.log('seeked'); });
vid1.addEventListener("canplaythrough", function(evt) {console.log(evt);})
vid1.currentTime = 5;

// not the right way, and not adding this to MDN
var vid1 = document.getElementsByTagName("video")[0];
vid1.onseeked = function() { console.log('seeked'); });
vid1.oncanplaythrough = function(evt) {console.log(evt);})
vid1.currentTime = 10.0;

Web authors are going to use the code similar to
myMedia[0].addEventListener(event, functionname);

where
myMedia = document.querySelectorAll('video, audio'); or something similar - using video and audio, not HTMLMediaElement

therefore the events listed in the ticket (with the exception of audioprocess and complete) should be attached to both video and audio, and HTMLMediaElement as well. But will be more helpful to developers under each element, with examples for that element.

estelle on 21 Feb 2019

The <video> and <audio> pages link to https://developer.mozilla.org/en-US/docs/Web/API/HTMLVideoElement and https://developer.mozilla.org/en-US/docs/Web/API/HTMLAudioElement respectively, which state the inheritance from HTMLMediaElement and HTMLElement. So it is definitely there, and I see posting it all under media element, but we need to also post under both video and audio, and under HTMLVideoElement and HTMLAudioElement, in some form, because that is too far of a stretch for devs to locate the events available on video and audio.

estelle on 22 Feb 2019

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/canplay_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/canplaythrough_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplaythrough_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/durationchange_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/durationchange_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/emptied_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/emptied_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/ended_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ended_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/loadeddata_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadeddata_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/loadedmetadata_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/loadedmetadata_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/pause_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/play_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/playing_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playing_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/ratechange_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/ratechange_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/seeked_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeked_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/seeking_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/seeking_event
[-] - translations checked NO RUSSIAN HTMLMediaElement TRANSLATION
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/stalled_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/stalled_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/suspend_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/suspend_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/timeupdate_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/timeupdate_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/volumechange_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/volumechange_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video/waiting_event

[X] - page exists
[X] - moved to https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/waiting_event
[X] - translations checked
[X] - see also is updated
[X] - Tags (Audio, Video, Events, Reference, HTMLMediaElement)
[] - Audio example
[] - Video example

estelle on 22 Feb 2019

@estelle Let's just back up a second and check in with what you are doing. I'm only saying this because from our conversation last night, it sounded like we were saying that you'd put duplicates of each event page hanging off HTMLVideoElement and HTMLAudioElement, so e.g.

But it looks like you are putting them on HTMLMediaElement, e.g.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canplay_event

This is actually OK, because HTMLMediaElement is not a mixin, but rather an inherited interface (my mistake, sorry about that).

I would say that you should add something prominent to the HTMLAudioElement and HTMLVideoElement pages making it clear that these events are available on those interfaces. Either a link to the events section on HTMLMediaElement page, or even repeating the whole section.

You should definitely also make sure they are linked from the

There don't appear to be any specialist events defined on HTMLAudioElement and HTMLVideoElement, which simplifies things somewhat. You do need to create pages for the EME-specific events, see https://dxr.mozilla.org/mozilla-central/source/dom/webidl/HTMLMediaElement.webidl#156.

Another thing to think about is that, while the spec doesn't officially define on... event handler properties for these events, they do exist. So we probably need pages for each of these too.

And I've also noticed that each of the event pages will be a lot of work, because they are done in an old style and need updating to the new style we agreed on (see https://developer.mozilla.org/en-US/docs/Web/API/Window/vrdisplayactivate_event as an example).

In short, this is a huge amount of work, and I feel kinda guilty dumping this one on you ;-)

I have some time on Monday/Tuesday next week and would like to offer to help you get some of these done. Let me know where you've got to by the end of your work time this week, and I can jump on board and dig into some of these if needed.