Skip to content

Commit

Permalink
Merge branch 'main' into headings
Browse files Browse the repository at this point in the history
  • Loading branch information
@marcoscaceres
marcoscaceres authored Dec 5, 2023
2 parents de8ebca + 6f69e59 commit ffde730
Showing 1 changed file with 92 additions and 68 deletions.
160 changes: 92 additions & 68 deletions media-source-respec.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3043,22 +3043,31 @@ <h2><dfn data-export="">Byte Stream Formats</dfn></h2>

<section id="examples">
<h2>Examples</h2>
<p>Example use of the Media Source Extensions</p>
<div class="block">
<div class="blockContent">
<pre class="code">&lt;script&gt;
function onSourceOpen(videoTag, e) {
var mediaSource = e.target;
<p>Example use of the Media Source Extensions.</p>
<pre class="example html">
&lt;video id="v" autoplay&gt;&lt;/video&gt;
&lt;script&gt;
const video = document.getElementById("v");
const mediaSource = new MediaSource();
mediaSource.addEventListener("sourceopen", onSourceOpen);
video.src = window.URL.createObjectURL(mediaSource);

async function onSourceOpen(e) {
const mediaSource = e.target;

if (mediaSource.sourceBuffers.length &gt; 0)
return;
if (mediaSource.sourceBuffers.length > 0) return;

var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');
const sourceBuffer = mediaSource.addSourceBuffer(
'video/webm; codecs="vorbis,vp8"',
);

videoTag.addEventListener('seeking', onSeeking.bind(videoTag, mediaSource));
videoTag.addEventListener('progress', onProgress.bind(videoTag, mediaSource));
video.addEventListener("seeking", (e) => onSeeking(mediaSource, e.target));
video.addEventListener("progress", () =>
appendNextMediaSegment(mediaSource),
);

var initSegment = GetInitializationSegment();
try {
const initSegment = await getInitializationSegment();

if (initSegment == null) {
// Error fetching the initialization segment. Signal end of stream with an error.
Expand All @@ -3067,77 +3076,92 @@ <h2>Examples</h2>
}

// Append the initialization segment.
var firstAppendHandler = function(e) {
var sourceBuffer = e.target;
sourceBuffer.removeEventListener('updateend', firstAppendHandler);
sourceBuffer.addEventListener("updateend", function firstAppendHandler() {
sourceBuffer.removeEventListener("updateend", firstAppendHandler);

// Append some initial media data.
appendNextMediaSegment(mediaSource);
};
sourceBuffer.addEventListener('updateend', firstAppendHandler);
});

sourceBuffer.appendBuffer(initSegment);
} catch (error) {
// Handle errors that might occur during initialization segment fetching.
console.error("Error fetching initialization segment:", error);
mediaSource.endOfStream("network");
}
}

async function appendNextMediaSegment(mediaSource) {
if (
mediaSource.readyState === "closed" ||
mediaSource.sourceBuffers[0].updating
)
return;

// If we have run out of stream data, then signal end of stream.
if (!haveMoreMediaSegments()) {
mediaSource.endOfStream();
return;
}

function appendNextMediaSegment(mediaSource) {
if (mediaSource.readyState == "closed")
return;

// If we have run out of stream data, then signal end of stream.
if (!HaveMoreMediaSegments()) {
mediaSource.endOfStream();
return;
}

// Make sure the previous append is not still pending.
if (mediaSource.sourceBuffers[0].updating)
return;

var mediaSegment = GetNextMediaSegment();
try {
const mediaSegment = await getNextMediaSegment();

if (!mediaSegment) {
// Error fetching the next media segment.
mediaSource.endOfStream("network");
return;
}

// NOTE: If mediaSource.readyState == “ended”, this appendBuffer() call will
// NOTE: If mediaSource.readyState == "ended", this appendBuffer() call will
// cause mediaSource.readyState to transition to "open". The web application
// should be prepared to handle multiple “sourceopen” events.
// should be prepared to handle multiple "sourceopen" events.
mediaSource.sourceBuffers[0].appendBuffer(mediaSegment);
}

function onSeeking(mediaSource, e) {
var video = e.target;

if (mediaSource.readyState == "open") {
// Abort current segment append.
mediaSource.sourceBuffers[0].abort();
}

// Notify the media segment loading code to start fetching data at the
// new playback position.
SeekToMediaSegmentAt(video.currentTime);

// Append a media segment from the new playback position.
appendNextMediaSegment(mediaSource);
catch (error) {
// Handle errors that might occur during media segment fetching.
console.error("Error fetching media segment:", error);
mediaSource.endOfStream("network");
}
}

function onProgress(mediaSource, e) {
appendNextMediaSegment(mediaSource);
function onSeeking(mediaSource, video) {
if (mediaSource.readyState === "open") {
// Abort current segment append.
mediaSource.sourceBuffers[0].abort();
}
&lt;/script&gt;

&lt;video id="v" autoplay&gt; &lt;/video&gt;

&lt;script&gt;
var video = document.getElementById('v');
var mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', onSourceOpen.bind(this, video));
video.src = window.URL.createObjectURL(mediaSource);
// Notify the media segment loading code to start fetching data at the
// new playback position.
seekToMediaSegmentAt(video.currentTime);

// Append a media segment from the new playback position.
appendNextMediaSegment(mediaSource);
}

function onProgress(mediaSource, e) {
appendNextMediaSegment(mediaSource);
}

// Example of async function for getting initialization segment
async function getInitializationSegment() {
// Implement fetching of the initialization segment
// This is just a placeholder function
}

// Example function for checking if there are more media segments
function haveMoreMediaSegments() {
// Implement logic to determine if there are more media segments
// This is just a placeholder function
}

// Example function for getting the next media segment
async function getNextMediaSegment() {
// Implement fetching of the next media segment
// This is just a placeholder function
}

// Example function for seeking to a specific media segment
function seekToMediaSegmentAt(currentTime) {
// Implement seeking logic
// This is just a placeholder function
}
&lt;/script&gt;
</pre>
</div>
</div>
</pre>
</section>


Expand Down

0 comments on commit ffde730

Please sign in to comment.