xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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-2025

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

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


posted @   xgqfrms  阅读(118)  评论(2编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
历史上的今天:
2021-05-31 ES6 destructuring assignment & default value & rename All In One
2021-05-31 default-passive-events All In One
2021-05-31 nrm & cnpm All In One
2020-05-31 Wi-Fi 6
2020-05-31 bind & this & new & arrow function
2020-05-31 HTML5 tags you don't know All In One
2020-05-31 LeetCode 算法题解 & js 大数相加计算解析 All In One
点击右上角即可分享
微信分享提示