Skip to content

Commit dc09d4e

Browse files
pepelsbeychrisdavidmills
pepelsbey
and
chrisdavidmills
authored
Add a ManagedMediaSource demo (#378)
* Add a ManagedMediaSource demo * Update media-source-extensions/managed-media-source/README.md Co-authored-by: Chris Mills <chrisdavidmills@gmail.com> --------- Co-authored-by: Chris Mills <chrisdavidmills@gmail.com>
1 parent ad6195d commit dc09d4e

File tree

3 files changed

+110
-0
lines changed

3 files changed

+110
-0
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,8 @@ Do not specify supported browsers and their versions in code comments or prose,
7777

7878
- The "media" directory contains examples and demos showing how to use HTML and DOM [media elements and APIs](https://developer.mozilla.org/docs/Web/Media).
7979

80+
- The "media-source-extensions" directory contains examples demonstrating the [Media Source Extensions API](https://developer.mozilla.org/docs/Web/API/Media_Source_Extensions_API). It includes a [ManagedMediaSource demo](https://mdn.github.io/dom-examples/media-source-extensions/managed-media-source/) showing how to set up a `ManagedMediaSource`, listen for `startstreaming`/`endstreaming` events, and log `bufferedchange` events.
81+
8082
- The "navigation-api" directory contains a basic example that demonstrates some features of the [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API). [Run the demo live](https://mdn.github.io/dom-examples/navigation-api/).
8183

8284
- The "notifications" directory contains one example showing how to make and handle persistent notifications, and another showing how to make and handle non-persistent notifications, using the [Notifications API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API).

‎media-source-extensions/managed-media-source/README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# ManagedMediaSource demo
2+
3+
This example demonstrates how to use the [`ManagedMediaSource`](https://developer.mozilla.org/en-US/docs/Web/API/ManagedMediaSource) interface to set up a managed media source, attach it to a `<video>` element, and respond to `startstreaming` and `endstreaming` events to control when media data is fetched. It also listens for `bufferedchange` events on the `ManagedSourceBuffer` and logs the added time ranges.
4+
5+
[See the example live](https://mdn.github.io/dom-examples/media-source-extensions/managed-media-source/).

‎media-source-extensions/managed-media-source/index.html‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>ManagedMediaSource demo</title>
7+
<style>
8+
body {
9+
font-family: system-ui, sans-serif;
10+
max-width: 460px;
11+
margin: 1rem auto;
12+
padding: 0 1rem;
13+
}
14+
15+
video {
16+
display: block;
17+
width: 100%;
18+
margin-bottom: 1rem;
19+
background: #000;
20+
}
21+
22+
output {
23+
display: block;
24+
white-space: pre;
25+
height: 6rem;
26+
overflow-y: auto;
27+
border: 1px solid #ccc;
28+
border-radius: 4px;
29+
padding: 0.5rem;
30+
font-family: monospace;
31+
font-size: 0.85rem;
32+
line-height: 1.4;
33+
}
34+
35+
.not-supported {
36+
padding: 1rem;
37+
background: #fff3cd;
38+
border: 1px solid #ffc107;
39+
border-radius: 4px;
40+
}
41+
</style>
42+
</head>
43+
<body>
44+
<h1>ManagedMediaSource demo</h1>
45+
<video controls width="400" height="225"></video>
46+
<output id="log"></output>
47+
48+
<!--
49+
Used in:
50+
- https://developer.mozilla.org/en-US/docs/Web/API/ManagedMediaSource
51+
-->
52+
53+
<script>
54+
const output = document.querySelector("#log");
55+
function log(msg) {
56+
output.textContent += msg + "\n";
57+
output.scrollTop = output.scrollHeight;
58+
}
59+
60+
const videoUrl =
61+
"https://mdn.github.io/shared-assets/videos/flower-fragmented.mp4";
62+
const mediaType = 'video/mp4; codecs="avc1.64001F, mp4a.40.2"';
63+
const video = document.querySelector("video");
64+
65+
if (!window.ManagedMediaSource?.isTypeSupported(mediaType)) {
66+
log("ManagedMediaSource is not supported in this browser.");
67+
document.querySelector("video").style.display = "none";
68+
output.classList.add("not-supported");
69+
} else {
70+
const source = new ManagedMediaSource();
71+
video.disableRemotePlayback = true;
72+
video.src = URL.createObjectURL(source);
73+
74+
video.addEventListener("canplay", () =>
75+
log("canplay — video is ready"),
76+
);
77+
78+
source.addEventListener("sourceopen", () => {
79+
const sourceBuffer = source.addSourceBuffer(mediaType);
80+
81+
sourceBuffer.addEventListener("bufferedchange", (event) => {
82+
for (let i = 0; i < event.addedRanges.length; i++) {
83+
log(
84+
`Buffered: ${event.addedRanges.start(i).toFixed(2)}s – ${event.addedRanges.end(i).toFixed(2)}s`,
85+
);
86+
}
87+
});
88+
89+
source.addEventListener("startstreaming", async () => {
90+
log("startstreaming — fetching media data…");
91+
const response = await fetch(videoUrl);
92+
const data = await response.arrayBuffer();
93+
sourceBuffer.appendBuffer(data);
94+
});
95+
96+
source.addEventListener("endstreaming", () => {
97+
log("endstreaming — enough data buffered");
98+
});
99+
});
100+
}
101+
</script>
102+
</body>
103+
</html>

0 commit comments

Comments
 (0)