1. 创建基本的HTML结构和JavaScript环境
首先，创建一个包含<video>元素的HTML页面，并在页面中引入JavaScript代码。例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MediaSource自适应流播放</title>
</head>
<body>
<video id="myVideo" controls></video>
<script src="main.js"></script>
</body>
</html>
2. 创建MediaSource对象并关联视频元素
在JavaScript中，使用window.MediaSource()构造函数创建一个MediaSource对象，并将其与<video>元素的src属性关联起来。同时，监听sourceopen事件，以便在MediaSource准备好后进行后续操作。
const video = document.getElementById('myVideo');
const mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', handleSourceOpen);
3. 在sourceopen事件处理函数中创建SourceBuffer
当sourceopen事件触发时，在事件处理函数handleSourceOpen中，根据要播放的媒体类型创建相应的SourceBuffer。例如，如果播放的是MP4格式的视频，且视频编码为avc1.42E01E，音频编码为mp4a.40.2，则创建SourceBuffer的代码如下：
function handleSourceOpen() {
const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
sourceBuffer.addEventListener('updateend', handleBufferUpdateEnd);
// 其他初始化操作，如设置当前播放的码率等
initPlayback();
}
这里还为SourceBuffer添加了updateend事件监听器，用于在数据更新完成后进行相应的处理，如切换码率等。
4. 下载并添加媒体数据到SourceBuffer
根据自适应流的原理，需要根据网络状况和播放进度等因素，动态地下载不同码率的媒体片段，并将其添加到SourceBuffer中。可以通过fetch API或其他网络请求方式获取媒体数据，然后使用SourceBuffer的appendBuffer()方法将数据添加进去。
function downloadAndAppendSegment(segmentUrl) {
return fetch(segmentUrl)
.then(response => response.arrayBuffer())
.then(buffer => {
sourceBuffer.appendBuffer(buffer);
});
}
5. 实现自适应逻辑
根据网络带宽的变化来动态地选择合适码率的媒体片段进行下载和播放。可以通过navigator.connection.effectiveType获取当前网络的类型和带宽估计，然后根据不同的网络状况选择不同的码率。
function initPlayback() {
const networkSpeed = navigator.connection.effectiveType;
let selectedBitrate;
if (networkSpeed === 'slow-2g') {
selectedBitrate = '240p';
} else if (networkSpeed === '2g') {
selectedBitrate = '360p';
} else {
selectedBitrate = '720p';
}
const segmentUrl = getSegmentUrl(selectedBitrate);
downloadAndAppendSegment(segmentUrl);
}
6. 处理SourceBuffer更新完成事件
在updateend事件处理函数handleBufferUpdateEnd中，可以根据播放进度和当前网络状况等，判断是否需要切换码率并下载新的媒体片段。
function handleBufferUpdateEnd() {
const currentTime = video.currentTime;
const bufferedEnd = video.buffered.end(0);
const networkSpeed = navigator.connection.effectiveType;
// 如果当前播放位置接近已缓冲的末尾，且网络状况发生变化，则切换码率并下载新的片段
if (currentTime + 5 >= bufferedEnd && networkSpeed!== lastNetworkSpeed) {
lastNetworkSpeed = networkSpeed;
const newBitrate = getNewBitrate(networkSpeed);
const newSegmentUrl = getSegmentUrl(newBitrate);
downloadAndAppendSegment(newSegmentUrl);
}
}
7. 结束流
当视频播放完毕或不再需要播放时，调用MediaSource的endOfStream()方法来表示流的结束。
function endPlayback() {
mediaSource.endOfStream();
}
通过以上步骤，就可以使用MediaSource规范实现自适应流播放，根据网络状况动态地调整播放的码率，为用户提供更流畅的观看体验。需要注意的是，实际应用中还需要处理更多的细节和错误情况，以确保播放的稳定性和可靠性。
