Skip to content

Commit 42ea605

Browse files
low-perrygithub-actions[bot]Josh-Cena
authored
Add missing SourceBuffer event pages (mdn#39224)
* Create error_event page * Add page for the abort event of the SourceBuffer * Add page for the update event of SourceBuffer * Add page for updateend event of SourceBuffer * Add page for updatestart event of SourceBuffer * Polish code examples * Update files/en-us/web/api/sourcebuffer/abort_event/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/sourcebuffer/error_event/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/sourcebuffer/update_event/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/sourcebuffer/updateend_event/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Update files/en-us/web/api/sourcebuffer/updatestart_event/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Fixes * Edits * Fix examples --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
1 parent 4e50517 commit 42ea605

6 files changed

Lines changed: 320 additions & 5 deletions

File tree

‎files/en-us/web/api/sourcebuffer/abort_event/index.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
title: "SourceBuffer: abort event"
3+
short-title: abort
4+
slug: Web/API/SourceBuffer/abort_event
5+
page-type: web-api-event
6+
browser-compat: api.SourceBuffer.abort_event
7+
---
8+
9+
{{APIRef("Media Source Extensions")}}{{AvailableInWorkers("window_and_dedicated")}}
10+
11+
The **`abort`** event of the {{domxref("SourceBuffer")}} interface is fired when the buffer appending is aborted, because the {{domxref("SourceBuffer.abort()")}} or {{domxref("SourceBuffer.removeSourceBuffer()")}} method is called while the {{domxref("SourceBuffer.appendBuffer()")}} algorithm is still running. The {{domxref("SourceBuffer.updating", "updating")}} property transitions from `true` to `false`. This event is fired before the {{domxref("SourceBuffer.updateend_event", "updateend")}} event.
12+
13+
## Syntax
14+
15+
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
16+
17+
```js-nolint
18+
addEventListener("abort", (event) => { })
19+
20+
onabort = (event) => { }
21+
```
22+
23+
## Event type
24+
25+
A generic {{domxref("Event")}}.
26+
27+
## Examples
28+
29+
### Aborting an append operation
30+
31+
This example demonstrates how to abort an append operation and handle the `abort` event.
32+
33+
```js
34+
const sourceBuffer = source.addSourceBuffer(mimeCodec);
35+
sourceBuffer.addEventListener("abort", () => {
36+
downloadStatus.textContent = "Canceled";
37+
});
38+
sourceBuffer.addEventListener("update", () => {
39+
downloadStatus.textContent = "Done";
40+
});
41+
sourceBuffer.addEventListener("updateend", () => {
42+
source.endOfStream();
43+
});
44+
cancelButton.addEventListener("click", () => {
45+
if (sourceBuffer.updating) {
46+
sourceBuffer.abort();
47+
}
48+
});
49+
downloadStatus.textContent = "Downloading...";
50+
fetch(assetURL)
51+
.then((response) => response.arrayBuffer())
52+
.then((data) => {
53+
downloadStatus.textContent = "Decoding...";
54+
sourceBuffer.appendBuffer(data);
55+
});
56+
```
57+
58+
## Specifications
59+
60+
{{Specifications}}
61+
62+
## Browser compatibility
63+
64+
{{Compat}}
65+
66+
## See also
67+
68+
- {{domxref("SourceBuffer.abort()")}}

‎files/en-us/web/api/sourcebuffer/error_event/index.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: "SourceBuffer: error event"
3+
short-title: error
4+
slug: Web/API/SourceBuffer/error_event
5+
page-type: web-api-event
6+
browser-compat: api.SourceBuffer.error_event
7+
---
8+
9+
{{APIRef("Media Source Extensions")}}{{AvailableInWorkers("window_and_dedicated")}}
10+
11+
The **`error`** event of the {{domxref("SourceBuffer")}} interface is fired when an error occurs during the processing of an {{domxref("SourceBuffer.appendBuffer", "appendBuffer()")}} operation. This may happen, for example, if the data being appended is not in the expected format, the `SourceBuffer` is in an invalid state, or the user agent is unable to process the data. The {{domxref("SourceBuffer.updating", "updating")}} property transitions from `true` to `false`. This event is fired before the {{domxref("SourceBuffer.updateend_event", "updateend")}} event.
12+
13+
## Syntax
14+
15+
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
16+
17+
```js-nolint
18+
addEventListener("error", (event) => { })
19+
20+
onerror = (event) => { }
21+
```
22+
23+
## Event type
24+
25+
A generic {{domxref("Event")}}.
26+
27+
## Examples
28+
29+
### Handling errors during appendBuffer()
30+
31+
This example demonstrates how to handle errors that occur during the `appendBuffer()` operation.
32+
33+
```js
34+
const sourceBuffer = source.addSourceBuffer(mimeCodec);
35+
sourceBuffer.addEventListener("error", () => {
36+
downloadStatus.textContent = "Error occurred during decoding";
37+
});
38+
sourceBuffer.addEventListener("update", () => {
39+
downloadStatus.textContent = "Done";
40+
});
41+
sourceBuffer.addEventListener("updateend", () => {
42+
source.endOfStream();
43+
});
44+
downloadStatus.textContent = "Downloading...";
45+
fetch(assetURL)
46+
.then((response) => response.arrayBuffer())
47+
.then((data) => {
48+
downloadStatus.textContent = "Decoding...";
49+
sourceBuffer.appendBuffer(data);
50+
});
51+
```
52+
53+
## Specifications
54+
55+
{{Specifications}}
56+
57+
## Browser compatibility
58+
59+
{{Compat}}
60+
61+
## See also
62+
63+
- {{domxref("SourceBuffer.appendBuffer()")}}
64+
- {{domxref("SourceBuffer.remove()")}}

‎files/en-us/web/api/sourcebuffer/index.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -52,15 +52,15 @@ _Inherits methods from its parent interface, {{domxref("EventTarget")}}._
5252
## Events
5353

5454
- {{domxref("SourceBuffer.abort_event", "abort")}}
55-
- : Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} is ended by a call to {{domxref("SourceBuffer.abort()")}}. {{domxref("SourceBuffer.updating")}} changes from `true` to `false`.
55+
- : Fired when the buffer appending is aborted, because the {{domxref("SourceBuffer.abort()")}} or {{domxref("MediaSource.removeSourceBuffer()")}} method is called while the {{domxref("SourceBuffer.appendBuffer()")}} algorithm is still running. {{domxref("SourceBuffer.updating")}} changes from `true` to `false`.
5656
- {{domxref("SourceBuffer.error_event", "error")}}
57-
- : Fired whenever an error occurs during {{domxref("SourceBuffer.appendBuffer()")}}. {{domxref("SourceBuffer.updating")}} changes from `true` to `false`.
57+
- : Fired when an error occurs during the processing of an {{domxref("SourceBuffer.appendBuffer", "appendBuffer()")}} operation. {{domxref("SourceBuffer.updating")}} changes from `true` to `false`.
5858
- {{domxref("SourceBuffer.update_event", "update")}}
59-
- : Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} or {{domxref("SourceBuffer.remove()")}} completes. {{domxref("SourceBuffer.updating")}} changes from `true` to `false`. This event is fired before `updateend`.
59+
- : Fired whenever {{domxref("SourceBuffer.appendBuffer()")}} or {{domxref("SourceBuffer.remove()")}} completes. {{domxref("SourceBuffer.updating")}} changes from `true` to `false`.
6060
- {{domxref("SourceBuffer.updateend_event", "updateend")}}
61-
- : Fired after {{domxref("SourceBuffer.appendBuffer()")}} or {{domxref("SourceBuffer.remove()")}} ends. This event is fired after `update`.
61+
- : Fired after the (not necessarily successful) completion of an {{domxref("SourceBuffer.appendBuffer", "appendBuffer()")}} or {{domxref("SourceBuffer.remove", "remove()")}} operation. This event is fired after the `update`, `error`, or `abort` events.
6262
- {{domxref("SourceBuffer.updatestart_event", "updatestart")}}
63-
- : Fired whenever the value of {{domxref("SourceBuffer.updating")}} changes from `false` to `true`.
63+
- : Fired when an {{domxref("SourceBuffer.appendBuffer", "appendBuffer()")}} or {{domxref("SourceBuffer.remove", "remove()")}} operation begins. {{domxref("SourceBuffer.updating", "updating")}} changes from `false` to `true`.
6464

6565
## Examples
6666

‎files/en-us/web/api/sourcebuffer/update_event/index.md‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
---
2+
title: "SourceBuffer: update event"
3+
short-title: update
4+
slug: Web/API/SourceBuffer/update_event
5+
page-type: web-api-event
6+
browser-compat: api.SourceBuffer.update_event
7+
---
8+
9+
{{APIRef("Media Source Extensions")}}{{AvailableInWorkers("window_and_dedicated")}}
10+
11+
The **`update`** event of the {{domxref("SourceBuffer")}} interface signals the successful completion of an {{domxref("SourceBuffer.appendBuffer()")}} or {{domxref("SourceBuffer.remove()")}} operation. The {{domxref("SourceBuffer.updating", "updating")}} attribute transitions from `true` to `false`. This event is fired before the {{domxref("SourceBuffer.updateend_event", "updateend")}} event.
12+
13+
## Syntax
14+
15+
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
16+
17+
```js-nolint
18+
addEventListener("update", (event) => { })
19+
20+
onupdate = (event) => { }
21+
```
22+
23+
## Event type
24+
25+
A generic {{domxref("Event")}}.
26+
27+
## Examples
28+
29+
### Handling the update event after appending data
30+
31+
This example demonstrates how to handle the `update` event after a successful `appendBuffer()` operation.
32+
33+
```js
34+
const sourceBuffer = source.addSourceBuffer(mimeCodec);
35+
sourceBuffer.addEventListener("error", () => {
36+
downloadStatus.textContent = "Error occurred during decoding";
37+
});
38+
sourceBuffer.addEventListener("update", () => {
39+
downloadStatus.textContent = "Done";
40+
});
41+
sourceBuffer.addEventListener("updateend", () => {
42+
source.endOfStream();
43+
});
44+
downloadStatus.textContent = "Downloading...";
45+
fetch(assetURL)
46+
.then((response) => response.arrayBuffer())
47+
.then((data) => {
48+
downloadStatus.textContent = "Decoding...";
49+
sourceBuffer.appendBuffer(data);
50+
});
51+
```
52+
53+
## Specifications
54+
55+
{{Specifications}}
56+
57+
## Browser compatibility
58+
59+
{{Compat}}
60+
61+
## See also
62+
63+
- {{domxref("SourceBuffer.appendBuffer()")}}
64+
- {{domxref("SourceBuffer.remove()")}}

‎files/en-us/web/api/sourcebuffer/updateend_event/index.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
---
2+
title: "SourceBuffer: updateend event"
3+
short-title: updateend
4+
slug: Web/API/SourceBuffer/updateend_event
5+
page-type: web-api-event
6+
browser-compat: api.SourceBuffer.updateend_event
7+
---
8+
9+
{{APIRef("Media Source Extensions")}}{{AvailableInWorkers("window_and_dedicated")}}
10+
11+
The **`updateend`** event of the {{domxref("SourceBuffer")}} interface signals the (not necessarily successful) completion of an {{domxref("SourceBuffer.appendBuffer", "appendBuffer()")}} or {{domxref("SourceBuffer.remove", "remove()")}} operation. The {{domxref("SourceBuffer.updating", "updating")}} attribute transitions from `true` to `false`. This event is fired after the {{domxref("SourceBuffer.update_event", "update")}}, {{domxref("SourceBuffer.error_event", "error")}}, or {{domxref("SourceBuffer.abort_event", "abort")}} events.
12+
13+
## Syntax
14+
15+
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
16+
17+
```js-nolint
18+
addEventListener("updateend", (event) => { })
19+
20+
onupdateend = (event) => { }
21+
```
22+
23+
## Event type
24+
25+
A generic {{domxref("Event")}}.
26+
27+
## Examples
28+
29+
### Handling the updateend event after appending data
30+
31+
This example demonstrates how to handle the `updateend` event. Note that we handle each completion event separately, and only use `updateend` for finalizing the stream.
32+
33+
```js
34+
const sourceBuffer = source.addSourceBuffer(mimeCodec);
35+
sourceBuffer.addEventListener("abort", () => {
36+
downloadStatus.textContent = "Canceled";
37+
});
38+
sourceBuffer.addEventListener("error", () => {
39+
downloadStatus.textContent = "Error occurred during decoding";
40+
});
41+
sourceBuffer.addEventListener("update", () => {
42+
downloadStatus.textContent = "Done";
43+
});
44+
sourceBuffer.addEventListener("updateend", () => {
45+
source.endOfStream();
46+
});
47+
downloadStatus.textContent = "Downloading...";
48+
fetch(assetURL)
49+
.then((response) => response.arrayBuffer())
50+
.then((data) => {
51+
downloadStatus.textContent = "Decoding...";
52+
sourceBuffer.appendBuffer(data);
53+
});
54+
```
55+
56+
## Specifications
57+
58+
{{Specifications}}
59+
60+
## Browser compatibility
61+
62+
{{Compat}}
63+
64+
## See also
65+
66+
- {{domxref("SourceBuffer.appendBuffer()")}}
67+
- {{domxref("SourceBuffer.remove()")}}

‎files/en-us/web/api/sourcebuffer/updatestart_event/index.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: "SourceBuffer: updatestart event"
3+
short-title: updatestart
4+
slug: Web/API/SourceBuffer/updatestart_event
5+
page-type: web-api-event
6+
browser-compat: api.SourceBuffer.updatestart_event
7+
---
8+
9+
{{APIRef("Media Source Extensions")}}{{AvailableInWorkers("window_and_dedicated")}}
10+
11+
The **`updatestart`** event of the {{domxref("SourceBuffer")}} interface signals the beginning of an {{domxref("SourceBuffer.appendBuffer", "appendBuffer()")}} or {{domxref("SourceBuffer.remove", "remove()")}} operation. The {{domxref("SourceBuffer.updating", "updating")}} attribute transitions from `false` to `true`.
12+
13+
## Syntax
14+
15+
Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property.
16+
17+
```js-nolint
18+
addEventListener("updatestart", (event) => { })
19+
20+
onupdatestart = (event) => { }
21+
```
22+
23+
## Event type
24+
25+
A generic {{domxref("Event")}}.
26+
27+
## Examples
28+
29+
### Listening for the updatestart event
30+
31+
```js
32+
const sourceBuffer = source.addSourceBuffer(mimeCodec);
33+
sourceBuffer.addEventListener("updatestart", () => {
34+
downloadStatus.textContent = "Modifying buffer...";
35+
});
36+
sourceBuffer.addEventListener("updateend", () => {
37+
downloadStatus.textContent = "Modification complete";
38+
});
39+
```
40+
41+
## Specifications
42+
43+
{{Specifications}}
44+
45+
## Browser compatibility
46+
47+
{{Compat}}
48+
49+
## See also
50+
51+
- {{domxref("SourceBuffer.appendBuffer()")}}
52+
- {{domxref("SourceBuffer.remove()")}}

0 commit comments

Comments
 (0)