用video标签流式加载

要使用video标签流式加载视频，可以通过以下步骤实现：

1. 在HTML页面中创建一个video标签，设置宽度、高度和controls属性。

<video id="myVideo" width="640" height="360" controls></video>

2. 通过JavaScript获取video元素，创建一个MediaSource对象，并将其与video元素关联。

var video = document.getElementById("myVideo");
var mediaSource = new MediaSource();
video.src = URL.createObjectURL(mediaSource);

3. 创建一个SourceBuffer对象，并将其添加到MediaSource对象中。

var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');

4. 通过AJAX或其他方式获取视频文件的分段数据，将其追加到SourceBuffer对象中。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'video.mp4', true);
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
  sourceBuffer.appendBuffer(xhr.response);
};
xhr.send();

5. 在视频播放过程中，通过监听MediaSource的sourceopen事件，检查SourceBuffer的缓冲区是否已满，如果没有满，则继续加载下一段视频数据。

mediaSource.addEventListener('sourceopen', function() {
  var bufferSize = sourceBuffer.buffered.length ? sourceBuffer.buffered.end(0) : 0;
  var nextChunkSize = 1024 * 1024; // 每次加载1MB数据
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'video.mp4', true);
  xhr.setRequestHeader('Range', 'bytes=' + bufferSize + '-' + (bufferSize + nextChunkSize - 1));
  xhr.responseType = 'arraybuffer';
  xhr.onload = function() {
    sourceBuffer.appendBuffer(xhr.response);
    if (!sourceBuffer.updating && !mediaSource.readyState === 'ended') {
      mediaSource.endOfStream();
    } else {
      setTimeout(loadNextChunk, 1000); // 每隔1秒继续加载下一段数据
    }
  };
  xhr.send();
});

以上就是使用video标签流式加载视频的基本步骤，需要注意的是，不同的浏览器对MediaSource和SourceBuffer的支持程度有所不同，因此需要进行兼容性处理。