MSE
MSE全称是媒体源扩展 API(Media Source Extensions API), 提供了实现无插件且基于 Web 的流媒体的功能。使用 MSE，媒体串流能够通过 JavaScript 创建，并且能通过使用 <audio> 和 <video> 元素进行播放。
MSE 使我们可以把通常的单个媒体文件的 src 值替换成引用 MediaSource对象（一个包含即将播放的媒体文件的准备状态等信息的容器），以及引用多个SourceBuffer对象（代表多个组成整个串流的不同媒体块）的元素。MSE 让我们能够根据内容获取的大小和频率，或是内存占用详情（例如什么时候缓存被回收），进行更加精准地控制。 它是基于它可扩展的 API 建立自适应比特率流客户端（例如DASH 或 HLS 的客户端）的基础。
浏览器支持兼容 MSE 的各种媒体容器，但采用 H.264 视频编码、AAC 音频编码和 MP4 容器的格式是非常常见的，且一定兼容。
如果没有精确的控制时间、媒体质量和内存释放等需求，使用 <video> 和 <source> 是一个更加简单但够用的方案。
浏览器是否支持MSE
if('MediaSource' in window) {
//
}
MIME 格式能否被客户端录制
var canRecord = MediaRecorder.isTypeSupported(mimeType)编码格式是受浏览器限制的：
WEB API
MediaSource
new MediaSource()
属性
- activeSourceBuffers
var myActiveSourceBuffers = mediaSource.activeSourceBuffers;- duration
用来获取或者设置当前媒体展示的时长。
mediaSource.duration = 5.5; // 5.5 seconds
var myDuration = mediaSource.duration;- readyState
- closed: 当前源并未附着到一个 media 元素上。
- open: 当前源已附着到一个 media 元素并准备好接收 SourceBuffer 对象。
- ended: 当前源已附着到一个 media 元素，但流已被MediaSource.endOfStream()结束。
方法
- MediaSource.addSourceBuffer()
MediaSource 的 addSourceBuffer() 方法会根据给定的 MIME 类型创建一个新的 SourceBuffer 对象，然后会将它追加到 MediaSource 的 SourceBuffers 列表中。
const mimeType = 'video/mp4;codecs=avc1.420028'; // avc1.42c01f avc1.42801e avc1.640028 avc1.420028
var sourceBuffer = mediaSource.addSourceBuffer(mimeType);- MediaSource.endOfStream()
MediaSource 接口的 endOfStream() 方法意味着流的结束。
一般只有几种情況会用到：
- 发生错误时
- 重置视频
- 结束流传输
- MediaSource.setLiveSeekableRange()
设置用户可以在媒体元素中查找的范围。(不常用，了解即可)
感觉要看下jsmpeg源码
示例
你可以使用MSE实现以下功能：
- 自适应拼接，如广告插入
- 时光平移（Time shifting）
- 控制性能和下载大小
使用MSE播发MP4视频
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>播发MP4</title>
</head>
<body>
<video id="video"></video>
<input id="file" type="file">
<script>
// mp4的url：https://raw.githubusercontent.com/nickdesaulniers/netfix/gh-pages/demo/frag_bunny.mp4
const file = document.getElementById("file")
const video = document.getElementById('video')
video.controls = false;
video.autoplay = "autoplay";
video.muted = true;
var mediaSource = new MediaSource();
video.src = window.URL.createObjectURL(mediaSource);
var sourceBuffer;
mediaSource.addEventListener('sourceopen', () => {
sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
});
file.addEventListener("change", function (e) {
var file = e.target.files[0];
var fr = new FileReader();
fr.readAsArrayBuffer(file);
fr.addEventListener("loadend", (e) => {
var buf = e.target.result;
console.log(buf);
sourceBuffer.addEventListener('updateend', function (_) {
console.log(mediaSource.readyState); // ended
mediaSource.endOfStream();
video.play();
});
sourceBuffer.appendBuffer(buf);
}, false)
})
</script>
</body>
</html>注意：视频格式必须为fragmented MP4，否则会出现类似以下报错:
index.html:34 Uncaught DOMException: Failed to execute 'endOfStream' on 'MediaSource': The MediaSource's readyState is not 'open'.
遇到一个问题： 使用ffmpeg转非fragmented MP4 为 fragmented MP4, 但还是报错，而使用mp4fragment则没有问题。（待解决）
# 有问题
ffmpeg -i non_fragmented.mp4 -strict -2 -movflags frag_keyframe+empty_moov fragmented.mp4
# 成功
mp4fragment non_fragmented.mp4 fragmented.mp4
