重复下载

[ClayGminx]

比如当我按着播放列表播放视频时，若下载了当前视频，那么当我观看完下一个视频，并点击下载时，会出现2个上一个视频的文件，4个下一个视频的文件。

通过查看源代码可以知道，这是因为普通下载后没有清空缓存导致的，如下所示：

let _addSourceBuffer = window.MediaSource.prototype.addSourceBuffer
window.MediaSource.prototype.addSourceBuffer = function (mime) {
  _appendDom()

  let sourceBuffer = _addSourceBuffer.call(this, mime)
  let _append = sourceBuffer.appendBuffer
  let bufferList = []
  const _sourceBuffer = {
    mime,
    bufferList,
    MSEInstance: this,
  }

  // 如果 streamSaver 已提前加载完成，则初始化对应的 streamWriter
  try {
    if (window.streamSaver) {
      const type = mime.split(';')[0].split('/')[1]
      _sourceBuffer.streamWriter = streamSaver.createWriteStream(`${getDocumentTitle()}.${type}`).getWriter()
    }
  } catch (error) {
    console.error(error)
  }

  _sourceBufferList.push(_sourceBuffer)
  sourceBuffer.appendBuffer = function (buffer) {
    sumFragment++
    $downloadNum.innerHTML = `已捕获 ${sumFragment} 个片段`

    if (isStreamDownload && _sourceBuffer.streamWriter) { // 流式下载
      _sourceBuffer.streamWriter.write(new Uint8Array(buffer));
    } else { // 普通 blob 下载
      bufferList.push(buffer)
    }
    _append.call(this, buffer)
  }
  return sourceBuffer
}

也就是说，每一次观看视频，都会执行该函数，其中_sourceBufferList.push(_sourceBuffer)总会添加新的视频流。