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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/16326149.html
未经授权禁止转载,违者必究!