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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/16326149.html
未经授权禁止转载,违者必究!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.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