Media Source Extensions All In One

Media Source Extensions All In One

https://caniuse.com/?search=Media Source Extensions

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

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

Media Source Extensions API

Media Source API

The Media Source API, formally known as Media Source Extensions (MSE), provides functionality enabling plugin-free web-based streaming media.
Using MSE, media streams can be created via JavaScript, and played using <audio> and <video> elements.

https://developer.mozilla.org/en-US/docs/Web/API/Media_Source_Extensions_API

https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/MediaSource

https://developer.mozilla.org/en-US/docs/Web/API/MediaSource

HTML5 Video Player

HTML5 Audio Player

demo

var vidElement = document.querySelector('video');

if (window.MediaSource) {
  var mediaSource = new MediaSource();
  vidElement.src = URL.createObjectURL(mediaSource);
  mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
  console.log('The Media Source Extensions API is not supported.');
}

function sourceOpen(e) {
  URL.revokeObjectURL(vidElement.src);
  var mime = 'video/webm; codecs="opus, vp09.00.10.08"';
  var mediaSource = e.target;
  var sourceBuffer = mediaSource.addSourceBuffer(mime);
  var videoUrl = 'droid.webm';
  fetch(videoUrl)
    .then(function (response) {
      return response.arrayBuffer();
    })
    .then(function (arrayBuffer) {
      sourceBuffer.addEventListener('updateend', function (e) {
        if (!sourceBuffer.updating && mediaSource.readyState === 'open') {
          mediaSource.endOfStream();
        }
      });
      sourceBuffer.appendBuffer(arrayBuffer);
    });
}

refs

https://web.dev/media-mse-basics/

https://developer.chrome.com/blog/mse-sourcebuffer/

https://v2.h5player.bytedance.com/gettingStarted/#兼容性

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---