Skip to content

Commit

Permalink
De-XHRify SourceBuffer example
Browse files Browse the repository at this point in the history
  • Loading branch information
wbamberg committed Nov 21, 2023
1 parent 98b2e45 commit 2b3217f
Showing 1 changed file with 24 additions and 28 deletions.
52 changes: 24 additions & 28 deletions files/en-us/web/api/sourcebuffer/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,49 +64,45 @@ _Inherits methods from its parent interface, {{domxref("EventTarget")}}._

## Examples

The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be [viewed live here](https://nickdesaulniers.github.io/netfix/demo/bufferAll.html) (you can also [download the source](https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html) for further investigation).
### Loading a video chunk by chunk

The following example loads a video chunk by chunk as fast as possible, playing it as soon as it can.

It is adapted from the demo at <https://github.com/nickdesaulniers/netfix/blob/gh-pages/demo/bufferAll.html>.

```js
const video = document.querySelector("video");

const assetURL = "frag_bunny.mp4";
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
const mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if ("MediaSource" in window && MediaSource.isTypeSupported(mimeCodec)) {
const mediaSource = new MediaSource();
console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
console.error(`Unsupported MIME type or codec: ${mimeCodec}`);
function loadVideo() {
if (MediaSource.isTypeSupported(mimeCodec)) {
const mediaSource = new MediaSource();
console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener("sourceopen", sourceOpen);
} else {
console.error("Unsupported MIME type or codec: ", mimeCodec);
}
}

function sourceOpen() {
async function sourceOpen() {
console.log(this.readyState); // open
const mediaSource = this;
const sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, (buf) => {
sourceBuffer.addEventListener("updateend", () => {
mediaSource.endOfStream();
video.play();
console.log(mediaSource.readyState); // ended
});
sourceBuffer.appendBuffer(buf);
const response = await fetch(assetURL);
const buffer = await response.arrayBuffer();
sourceBuffer.addEventListener("updateend", () => {
mediaSource.endOfStream();
video.play();
console.log(mediaSource.readyState); // ended
});
sourceBuffer.appendBuffer(buffer);
}

function fetchAB(url, cb) {
console.log(url);
const xhr = new XMLHttpRequest();
xhr.open("get", url);
xhr.responseType = "arraybuffer";
xhr.onload = () => {
cb(xhr.response);
};
xhr.send();
}
const load = document.querySelector("#load");
load.addEventListener("click", loadVideo);
```

## Specifications
Expand Down

0 comments on commit 2b3217f

Please sign in to comment.