Use Case X: HTML 5 API usage for Playback

Initializations

Cross-browser Compatibility checks

These checks ensure that the client code works across different browser environments.

window.MediaSource = window.MediaSource || window.WebKitMediaSource;

It is still possible that MediaSource is not available in the browser, such condition should be checked and flagged.

if (!!!window.MediaSource) { alert('MediaSource API is not available'); }

Create MediaSource

mediaSource = new MediaSource();

Linking MediaSource to HTML5 Video src

video.src = window.URL.createObjectURL(mediaSource);

Assigning Event Listeners

One basic event that requires a listener is the 'sourceopen' event, here an example method “sourceOpen” will handle that event. This event notifies the application that the MediaSource is actually open.

MediaSource.addEventListener('sourceopen', sourceOpen);

Adding Source Buffers

For each media track, e.g. Audio and Video track, a source buffer is added. An example below is for two specific tracks: video (MIME Type video/mp4, codec avc1.640028), and audio (MIME Type audio/mp4, codec mp4a.40.2).

var videoSourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.640028"');

var audioSourceBuffer = mediaSource.addSourceBuffer('audio/mp4; codecs="mp4a.40.2"');

Check if Type Supported

Returns a Boolean if the provided MIME type is supported.

var isItSupported = mediaSource.isTypeSupported('video/mp4; codecs="avc1.640028"');

Playback

Append Source Data

Compressed media track data is appended to Source Buffer, here an element “videoBuffer” of the type Uint8Array is appended to the videoSourceBuffer in Section 1.1.5. Similarly, track data of other types is appended.

videoSourceBuffer.appendBuffer(videoBuffer);

Seeking

The writable currentTime attribute of video element can be used to seek. Here, as an example, we seek to the earliest presentation time found in the data already appended to the buffer.

if (sourceBuffer.buffered.length > 0) //Check if there is some data already appended { presentationTimeOffset = sourceBuffer.buffered.start(0); //Find the earliest time in the //buffer video.currentTime = presentationTimeOffset; //Seek to the point }

Start/Stop Playback

The play() and pause() methods of the video element play and pause the video, respectively.

Playback: Switching

Provided some conditions are fulfilled (complete documentation needed), i.e.

1. the codec family remains the same (a codec family here would be, for example, H.264/AVC. Differing encoding variations of H.264/AVC will belong to the same codec family), and
2. media timeline is monotonically increasing, media data with differing quality (differing bitrate and/or resolution) can be appended to the source buffer if it follows its corresponding initialization data (e.g. moov box before a moof box for ISO BMFF media), and the resulting playback would be uninterrupted.

Teardown/Cleanup

Remove Source Buffer

SourceBuffer.remove()

References

[1] Media Source Extensions, W3C Candidate Recommendation 05 July 2016, https://www.w3.org/TR/media-source/ [2] The HTML 5 JavaScript API Index, http://html5index.org/ [3] MediaSource Interface, https://developer.mozilla.org/en-US/docs/Web/API/MediaSource