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..e9261322e444715 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,21 +29,62 @@ A generic {{domxref("Event")}}. ## Examples +### Abort loading a media resource + +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 + +```html + + + + +
+``` + +#### CSS + +```css +video, +button, +pre { + display: block; + margin-block: 1rem; +} +``` + +#### JavaScript + ```js const video = document.querySelector("video"); -const videoSrc = "https://example.org/path/to/video.webm"; +const loadAndAbortButton = document.querySelector("#loadAndAbort"); +const log = document.querySelector("#log"); video.addEventListener("abort", () => { - console.log(`Abort loading: ${videoSrc}`); + log.textContent += "Video loading aborted\n"; }); -const source = document.createElement("source"); -source.setAttribute("src", videoSrc); -source.setAttribute("type", "video/webm"); +loadAndAbortButton.addEventListener("click", () => { + log.textContent = "Loading video...\n"; + + video.src = `/shared-assets/videos/flower.webm?nocache=${Date.now()}`; + video.load(); -video.appendChild(source); + setTimeout(() => { + video.removeAttribute("src"); + video.load(); + }, 50); +}); ``` +#### Result + +{{EmbedLiveSample("Abort_loading_a_media_resource", "100%", 300)}} + ## Specifications {{Specifications}}