AJAX(XHR) 与 MSE（Media Source Extensions）参考代码！

最新推荐文章于 2024-12-08 21:35:51 发布

原创最新推荐文章于 2024-12-08 21:35:51 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

HTML5_web_https_http_etc 同时被 2 个专栏收录

56 篇文章

订阅专栏

JavaScript/DOM CSS

34 篇文章

订阅专栏

本文演示了如何使用MediaSource API将一个完整的.mp4视频文件分割成多个块，并逐个块地追加到video元素中进行播放。此过程利用了File API对视频文件进行切分，并通过MediaSource API实现动态加载。

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>MediaSource API Demo</title>

<style>
::selection {
color: #fff;
background: pink;
}
html, body {
overflow: hidden;
height: 100%;
}
body {
margin: 0;
}
body {
color: #222;
font-family: 'Open Sans', arial, sans-serif;
display: -webkit-flex;
-webkit-align-items: center;
-webkit-justify-content: center;
-webkit-flex-direction: column;
display: -ms-flex;
-ms-align-items: center;
-ms-justify-content: center;
-ms-flex-direction: column;
display: -moz-flex;
-moz-align-items: center;
-moz-justify-content: center;
-moz-flex-direction: column;
display: -o-flex;
-o-align-items: center;
-o-justify-content: center;
-o-flex-direction: column;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
details {
position: absolute;
top: 1em;
left: 1em;
margin: 1em 0;
cursor: pointer;
padding: 10px;
background: #fff;
border: 1px solid rgba(0,0,0,0.3);
border-radius: 5px;
max-width: 600px;
font-size: 10pt;
z-index: 100;
}
details > div {
margin: 10px 0;
}
details blockquote {
font-style: italic;
}
pre:not(#log) {
background: #eee;
border-radius: 5px;
padding: 3px 17px 20px 17px;
border: 1px solid #ccc;
color: navy;
}
#log {
margin: 0 1em;
}
code {
font-weight: bold;
}
section {
display: -webkit-flex;
display: flex;
}
</style>
</head>
<body>

<details>
<summary>What is this?</summary>
<div>
    <p>This demo splits a <a href="Chrome_ImF.webm">.mp4 video</a> into
    <span data-num-chunks></span> chunks using the File APIs. The entire movie
    is then 'streamed' to a <code><video></code> element by appending each
    chunk using the
    <a href="http://dvcs.w3.org/hg/html-media/raw-file/tip/media-source/media-source.html" target="_blank">MediaSource API</a>.</p>
    <p><b>Support:</b> Chrome Dev Channel 17+ and the <code>--enable-media-source</code> flag set. The feature is enabled
      by default in Chrome 23, which also updated its implementation to the new version of the API.</p>
</div>
</details>

<h3>Appending .mp4 video chunks using the Media Source API</h3>

<section>
<video controls autoplay ></video>

<pre id="log"></pre>
</section>



<script>
function Logger(id) {
this.el = document.getElementById('log');
}
Logger.prototype.log = function(msg) {
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode(msg));
fragment.appendChild(document.createElement('br'));
this.el.appendChild(fragment);
};

Logger.prototype.clear = function() {
this.el.textContent = '';
};

var logger = new Logger('log');
</script>

<script>
var FILE = 'test.mp4';
//var FILE = 'kms2479_final.mp4';
//var FILE = 'kms0009_AustinPowers.m2t';
var NUM_CHUNKS = 5;
var video = document.querySelector('video');

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

var mediaSource = new MediaSource();

document.querySelector('[data-num-chunks]').textContent = NUM_CHUNKS;

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

function callback(e) {
alert(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> leosu add log here...... callback   here should only call once!");
   var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="mp4"');
//var sourceBuffer = mediaSource.addSourceBuffer('video/mp2t; codecs="mpv"');

logger.log('mediaSource readyState: ' + this.readyState);

GET(FILE, function(uInt8Array) {
      alert(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> leosu add log here...... GET ");
      //logger.log('uInt8Array: ' + uInt8Array);
    var file = new Blob([uInt8Array], {type: 'video/mp4'});
    //var file = new Blob([uInt8Array], {type: 'video/mp2t'});
    var chunkSize = Math.ceil(file.size / NUM_CHUNKS);

    logger.log('num chunks:' + NUM_CHUNKS);
    logger.log('chunkSize:' + chunkSize + ', totalSize:' + file.size);

    // Slice the video into NUM_CHUNKS and append each to the media element.
    var i = 0;

    (function readChunk_(i) {
      var reader = new FileReader();

      // Reads aren't guaranteed to finish in the same order they're started in,
      // so we need to read + append the next chunk after the previous reader
      // is done (onload is fired).
      reader.onload = function(e) {

          alert(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> leosu add log here...... GET e.target.result is: " + e.target.result);
        sourceBuffer.append(new Uint8Array(e.target.result));
        logger.log('appending chunk:' + i);
        if (i == NUM_CHUNKS - 1) {
        //if (i == 10) {
          mediaSource.endOfStream();
        } else {
          if (video.paused) {
            video.play(); // Start playing after 1st chunk is appended.
          }
          readChunk_(++i);
        }
      };

      var startByte = chunkSize * i;
      var chunk = file.slice(startByte, startByte + chunkSize);

      reader.readAsArrayBuffer(chunk);
    })(i); // Start the recursive call by self calling.
});
}

mediaSource.addEventListener('sourceopen', callback, false);
mediaSource.addEventListener('webkitsourceopen', callback, false);

mediaSource.addEventListener('webkitsourceended', function(e) {
logger.log('mediaSource readyState: ' + this.readyState);
}, false);

function GET(url, local_callback) {

   alert(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> leosu add log here...... GET url is: " + url);
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.send();

xhr.onload = function(e) {
    if (xhr.status != 200) {
      alert("Unexpected status code " + xhr.status + " for " + url);
      return false;
    }
    alert(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> leosu add log here...... GET will call local_callback");
    local_callback(new Uint8Array(xhr.response));
};
}
</script>


</body>
</html>