›››

»››

»››

»››

»››

»››

…

»

»›››››

» ⇒

››

››››

›

https://www.w3.org/TR/media-source/

var ms = new window.MediaSource();

var video = document.querySelector('video');video.src = window.URL.createObjectURL(ms);

ms.addEventListener('sourceopen', function(e) { ... var sourceBuffer = ms.addSourceBuffer( 'video/mp4; codecs="avc1.4d400d"' ); sourceBuffer.appendBuffer(videoChunk); ....}, false);

›››

› new Uint8Array(arrayBuffer);

›

var baseUrl = 'https://bitdash-a.akamaihd.net/content/MI201109210084_1/video/720_2400000/dash/';var initUrl = baseUrl + 'init.mp4';var templateUrl = baseUrl + 'segment_$Number$.m4s';var sourceBuffer;var index = 0;var numberOfChunks = 52;var video = document.querySelector('video');

if (!window.MediaSource) { return; }

var ms = new window.MediaSource();video.src = window.URL.createObjectURL(ms);ms.addEventListener('sourceopen', onMediaSourceOpen);

function onMediaSourceOpen() { sourceBuffer = ms.addSourceBuffer( 'video/mp4; codecs="avc1.4d401f"'); sourceBuffer.addEventListener('updateend', nextSegment); GET(initUrl, appendToBuffer); video.play();}

function nextSegment() { var url = templateUrl.replace('$Number$', index); GET(url, appendToBuffer); index++; if (index > numberOfChunks) { sourceBuffer.removeEventListener('updateend', nextSegment); }}

function appendToBuffer(videoChunk) { if (videoChunk) { sourceBuffer.appendBuffer(new Uint8Array(videoChunk)); }}

function GET(url, callback) { var xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { if (xhr.status != 200) { return false; } callback(xhr.response); }; xhr.send();}

››

›››

›

›

›