Skip to content

docs: clarify HTMLMediaElement abort event example#44227

Open
HeisenPat wants to merge 2 commits into
mdn:mainfrom
HeisenPat:codex/mdn-44222-abort-event-example
Open

docs: clarify HTMLMediaElement abort event example#44227
HeisenPat wants to merge 2 commits into
mdn:mainfrom
HeisenPat:codex/mdn-44222-abort-event-example

Conversation

@HeisenPat
Copy link
Copy Markdown

Summary

  • Clarifies when the HTMLMediaElement abort event can fire
  • Updates the example so it starts one media load and then starts another before the first finishes

Related issue

Fixes #44222

Testing

  • markdownlint-cli2 files/en-us/web/api/htmlmediaelement/abort_event/index.md
  • prettier -c files/en-us/web/api/htmlmediaelement/abort_event/index.md
  • cspell --config .vscode/cspell.json files/en-us/web/api/htmlmediaelement/abort_event/index.md
  • MDN pre-commit hook

@HeisenPat HeisenPat requested a review from a team as a code owner May 22, 2026 19:38
@HeisenPat HeisenPat requested review from hamishwillee and removed request for a team May 22, 2026 19:38
@github-actions github-actions Bot added Content:WebAPI Web API docs size/s [PR only] 6-50 LoC changed labels May 22, 2026
@hamishwillee hamishwillee force-pushed the codex/mdn-44222-abort-event-example branch from 5efa2a4 to 83b8ec5 Compare May 25, 2026 00:11
@github-actions
Copy link
Copy Markdown
Contributor

Preview URLs (1 page)

Copy link
Copy Markdown
Collaborator

@hamishwillee hamishwillee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @HeisenPat

This is obviously much better, but

  1. Can we modify to a more common approach, which is to use a button. Something "like" this, but with the comment that this would only fire if the video was still downloading.

    const video = document.querySelector('video');
    const stopButton = document.querySelector('#stopBtn');
    
    stopButton.addEventListener('click', () => {
      // 1. Remove the source to force the browser to give up fetching
      video.removeAttribute('src'); 
    
      // 2. Invoke load() to trigger the resource selection/abort algorithms
      video.load(); 
    });
  2. In the introduction it says

    The abort event is fired when the resource was not fully loaded, but not as the result of an error.

    We could be more clear about the intent

    The abort event is fired when media resource loading is stopped by a user before completion.

    This is useually achieved by removing the src attribute or setting it to the empty string (""), then calling load().

FWIW Generally it is worth selecting issues that don't have the "needs triage" label on them - once triaged they are more likely to be valid, and there are often better comments on what might be an acceptable fix.
Very happy with this to be fixed of course, as it is a bug.

@HeisenPat
Copy link
Copy Markdown
Author

HeisenPat commented May 27, 2026

Thanks @hamishwillee, I updated the example to use a button, remove the src attribute, and call load(). I also clarified the intro text as suggested.

Copy link
Copy Markdown
Collaborator

@hamishwillee hamishwillee left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @HeisenPat

Another developer had a shot at this in #44280

One thing @chrisdavidmills pointed out is that the example in that #44280 (review) didn't behave as expected. So::

  1. It would be beneficial to copy the approach there and make a live example.
  2. Test it.

O

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Content:WebAPI Web API docs size/s [PR only] 6-50 LoC changed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

HTMLMediaElement abort event: unclear example

3 participants