使用 MediaSource 实现视频边播放边加载效果

原创

于 2024-12-08 21:35:51 发布 · 3.2k 阅读

38 ·

CC 4.0 BY-SA版权

文章标签：

#音视频

该文章已生成可运行项目，

背景

打开B站看视频时，发现每个视频点进去后马上播放，并只加载视频一小段，然后在播放同时加载后面一小段，而且在拖动进度条也能快速加载并播放。
在这里插入图片描述

本文通过简单demo实现一下视频分段加载并且边播放边加载的效果。

整体思路是，通过 HTTP 请求头中添加 Range 获取视频的一部分数据，然后通过 MediaSource 控制媒体片段加载缓存和播放。

分析过程参考：
通过调试技术，我理清了 b 站视频播放很快的原理

代码参考：
MDN - WebAPI - MediaSource
一步一步学习使用 MediaSource 实现动态媒体流

MediaSource

演示源代码，直接全贴出来，加载全部如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <video controls></video>
    <script>
      var video = document.querySelector('video');

      var assetURL = 'frag_bunny.mp4';
      // Need to be specific for Blink regarding codecs
      // ./mp4info frag_bunny.mp4 | grep Codec
      var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

      if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
   
   
        var mediaSource = new MediaSource;
        //console.log(mediaSource.readyState); // closed
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);
      } else {
   
   
        console.error('Unsupported MIME type or codec: ', mimeCodec);
      }

      function sourceOpen (_) {
   
   
        //console.log(this.readyState); // open
        var mediaSource = this;
        var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        fetchAB(assetURL, function (buf) {
   
   
          sourceBuffer.addEventListener('updateend', function (_) {
   
   
            mediaSource.endOfStream();
            video.play();
            //console.log(mediaSource.readyState); // ended
          });
          sourceBuffer.appendBuffer(buf);
        });
      };

      function fetchAB (url, cb) {
   
   
        console.log(url);
        var xhr = new XMLHttpRequest;
        xhr.open('get', url);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
   
   
          cb(xhr.response);
        };
        xhr.send();
      };
    </script>
  </body>
</html>

播放过程中加载，如下

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
  </head>
  <body>
    <video controls></video>
    <script>
      var video = document.querySelector('video');

      var assetURL = 'frag_bunny.mp4';
      // Need to be specific for Blink regarding codecs
      // ./mp4info frag_bunny.mp4 | grep Codec
      var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
      var totalSegments = 5;
      var segmentLength = 0;
      var segmentDuration = 0;
      var bytesFetched = 0;
      var requestedSegments = [];

      for (var i = 0; i < totalSegments; ++i) requestedSegments[i] = false;

      var mediaSource = null;
      if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
   
   
        mediaSource = new MediaSource;
        //console.log(mediaSource.readyState); // closed
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);
      } else {
   
   
        console.error('Unsupported MIME type or codec: ', mimeCodec);
      }

      var sourceBuffer = null;
      function sourceOpen (_) {
   
   
        sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        getFileLength(assetURL, function (fileLength) {
   
   
          console.log((fileLength / 1024 / 1024).toFixed(2), 'MB');
          //totalLengt