From 83b8ec506e213091b1be2eee8222371c9799d7d0 Mon Sep 17 00:00:00 2001
From: HeisenPat <41377217+HeisenPat@users.noreply.github.com>
Date: Fri, 22 May 2026 21:30:41 +0200
Subject: [PATCH 1/4] docs: clarify HTMLMediaElement abort event example

---
 .../api/htmlmediaelement/abort_event/index.md | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/files/en-us/web/api/htmlmediaelement/abort_event/index.md b/files/en-us/web/api/htmlmediaelement/abort_event/index.md
index a6e009e2f0d3ec8..7ecf423f78c7021 100644
--- a/files/en-us/web/api/htmlmediaelement/abort_event/index.md
+++ b/files/en-us/web/api/htmlmediaelement/abort_event/index.md
@@ -28,19 +28,26 @@ A generic {{domxref("Event")}}.
 
 ## Examples
 
+The following example starts loading one video resource, then starts another load before the
+first resource has finished.
+If the first resource is still loading when `load()` is called again, the `abort` event fires.
+
 ```js
 const video = document.querySelector("video");
-const videoSrc = "https://example.org/path/to/video.webm";
+const firstVideoSrc = "https://example.org/path/to/video.webm";
+const secondVideoSrc = "https://example.org/path/to/another-video.webm";
 
 video.addEventListener("abort", () => {
-  console.log(`Abort loading: ${videoSrc}`);
+  console.log(`Aborted loading: ${firstVideoSrc}`);
 });
 
-const source = document.createElement("source");
-source.setAttribute("src", videoSrc);
-source.setAttribute("type", "video/webm");
+video.src = firstVideoSrc;
+video.load();
 
-video.appendChild(source);
+setTimeout(() => {
+  video.src = secondVideoSrc;
+  video.load();
+}, 1000);
 ```
 
 ## Specifications

From 43e6db0a990cdbf89f4b00331bfcf640d59b9a10 Mon Sep 17 00:00:00 2001
From: HeisenPat <41377217+HeisenPat@users.noreply.github.com>
Date: Wed, 27 May 2026 20:48:08 +0200
Subject: [PATCH 2/4] Address abort event example review

---
 .../api/htmlmediaelement/abort_event/index.md | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/files/en-us/web/api/htmlmediaelement/abort_event/index.md b/files/en-us/web/api/htmlmediaelement/abort_event/index.md
index 7ecf423f78c7021..cab4cd73e22c40a 100644
--- a/files/en-us/web/api/htmlmediaelement/abort_event/index.md
+++ b/files/en-us/web/api/htmlmediaelement/abort_event/index.md
@@ -8,7 +8,8 @@ browser-compat: api.HTMLMediaElement.abort_event
 
 {{APIRef("HTML DOM")}}
 
-The **`abort`** event is fired when the resource was not fully loaded, but not as the result of an error.
+The **`abort`** event is fired when media resource loading is stopped before completion, but not as the result of an error.
+This is usually achieved by removing the `src` attribute or setting it to the empty string (`""`), then calling `load()`.
 
 This event is not cancelable and does not bubble.
 
@@ -28,26 +29,21 @@ A generic {{domxref("Event")}}.
 
 ## Examples
 
-The following example starts loading one video resource, then starts another load before the
-first resource has finished.
-If the first resource is still loading when `load()` is called again, the `abort` event fires.
+The following example starts loading a video resource, then provides a button that stops the load.
+If the video resource is still loading when `load()` is called, the `abort` event fires.
 
 ```js
 const video = document.querySelector("video");
-const firstVideoSrc = "https://example.org/path/to/video.webm";
-const secondVideoSrc = "https://example.org/path/to/another-video.webm";
+const stopButton = document.querySelector("#stopBtn");
 
 video.addEventListener("abort", () => {
-  console.log(`Aborted loading: ${firstVideoSrc}`);
+  console.log("Video loading aborted");
 });
 
-video.src = firstVideoSrc;
-video.load();
-
-setTimeout(() => {
-  video.src = secondVideoSrc;
+stopButton.addEventListener("click", () => {
+  video.removeAttribute("src");
   video.load();
-}, 1000);
+});
 ```
 
 ## Specifications

From 9a8e54284bac9b6c792d2efd54d06ef91f5fda40 Mon Sep 17 00:00:00 2001
From: HeisenPat <41377217+HeisenPat@users.noreply.github.com>
Date: Wed, 3 Jun 2026 22:28:06 +0200
Subject: [PATCH 3/4] Add live abort event example

---
 .../api/htmlmediaelement/abort_event/index.md | 47 +++++++++++++++++--
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/files/en-us/web/api/htmlmediaelement/abort_event/index.md b/files/en-us/web/api/htmlmediaelement/abort_event/index.md
index cab4cd73e22c40a..b19456ff76fb8a4 100644
--- a/files/en-us/web/api/htmlmediaelement/abort_event/index.md
+++ b/files/en-us/web/api/htmlmediaelement/abort_event/index.md
@@ -29,23 +29,60 @@ A generic {{domxref("Event")}}.
 
 ## Examples
 
-The following example starts loading a video resource, then provides a button that stops the load.
+### Abort loading a media resource
+
+The following example starts loading a video resource, then aborts the load by removing the `src` attribute and calling `load()`.
 If the video resource is still loading when `load()` is called, the `abort` event fires.
 
+#### HTML
+
+```html
+<video controls width="250"></video>
+
+<button id="loadAndAbort">Load and abort video</button>
+
+<pre id="log"></pre>
+```
+
+#### CSS
+
+```css
+video,
+button,
+pre {
+  display: block;
+  margin-block: 1rem;
+}
+```
+
+#### JavaScript
+
 ```js
 const video = document.querySelector("video");
-const stopButton = document.querySelector("#stopBtn");
+const loadAndAbortButton = document.querySelector("#loadAndAbort");
+const log = document.querySelector("#log");
 
 video.addEventListener("abort", () => {
-  console.log("Video loading aborted");
+  log.textContent += "Video loading aborted\n";
 });
 
-stopButton.addEventListener("click", () => {
-  video.removeAttribute("src");
+loadAndAbortButton.addEventListener("click", () => {
+  log.textContent = "Loading video...\n";
+
+  video.src = `/shared-assets/videos/flower.webm?nocache=${Date.now()}`;
   video.load();
+
+  setTimeout(() => {
+    video.removeAttribute("src");
+    video.load();
+  }, 50);
 });
 ```
 
+#### Result
+
+{{EmbedLiveSample("Abort_loading_a_media_resource", "100%", 300)}}
+
 ## Specifications
 
 {{Specifications}}

From e60474556e9391f29a2fb85a38a584d88feec80b Mon Sep 17 00:00:00 2001
From: Hamish Willee <hamishwillee@gmail.com>
Date: Fri, 5 Jun 2026 14:18:25 +1000
Subject: [PATCH 4/4] Apply suggestions from code review

Co-authored-by: Hamish Willee <hamishwillee@gmail.com>
---
 files/en-us/web/api/htmlmediaelement/abort_event/index.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/files/en-us/web/api/htmlmediaelement/abort_event/index.md b/files/en-us/web/api/htmlmediaelement/abort_event/index.md
index b19456ff76fb8a4..e9261322e444715 100644
--- a/files/en-us/web/api/htmlmediaelement/abort_event/index.md
+++ b/files/en-us/web/api/htmlmediaelement/abort_event/index.md
@@ -31,7 +31,9 @@ A generic {{domxref("Event")}}.
 
 ### Abort loading a media resource
 
-The following example starts loading a video resource, then aborts the load by removing the `src` attribute and calling `load()`.
+The following example demonstrates how to abort a video.
+When you press the button it starts loading a video resource.
+After a short timeout it aborts the load by removing the `src` attribute and calling the `load()` method.
 If the video resource is still loading when `load()` is called, the `abort` event fires.
 
 #### HTML