分段上传的Streaming video能否在video div中作为单视频播放

完全可以实现，目前行业内主流有三种落地方式： #

方案1：MediaSource Extensions API 原生实现（最推荐） #

这是各大长/短视频平台通用的原生方案，兼容性覆盖所有现代浏览器，不需要引入第三方依赖，播放无分段切换感：

• 提前将拆分后的视频转成fMP4（碎片化MP4）或者TS格式，普通整切的MP4分段无法直接拼接加载
• 核心实现逻辑：
  1. 创建MediaSource实例，绑定到页面video元素的src属性
  2. 监听MediaSource的sourceopen事件，触发后添加对应视频编码格式的SourceBuffer
  3. 按播放顺序异步请求视频分段，把分段的二进制数据依次追加到SourceBuffer中
  4. 所有分段加载追加完成后调用MediaSource.endOfStream()结束加载流程
• 核心代码示例：

const video = document.querySelector('video')
const mediaSource = new MediaSource()
video.src = URL.createObjectURL(mediaSource)

mediaSource.addEventListener('sourceopen', () => {
  // 此处codecs参数需要替换为你实际视频对应的编码格式
  const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.4D401E, mp4a.40.2"')
  // 按播放顺序排列的分段链接数组
  const segmentUrls = ['seg1.mp4', 'seg2.mp4', 'seg3.mp4']
  let curIndex = 0

  function loadNextSegment() {
    if (curIndex >= segmentUrls.length) {
      mediaSource.endOfStream()
      return
    }
    fetch(segmentUrls[curIndex])
      .then(res => res.arrayBuffer())
      .then(buf => {
        sourceBuffer.appendBuffer(buf)
        curIndex++
      })
  }

  sourceBuffer.addEventListener('updateend', loadNextSegment)
  loadNextSegment()
})

注意：如果编码参数和实际视频不一致会直接导致加载失败，需要提前确认你的视频编码信息

方案2：JS手动控制分段切换（轻量场景适用） #

如果不想处理MediaSource的复杂逻辑，对播放连续性要求不高可以用这个方案，实现成本极低：

• 提前把所有分段按播放顺序存在数组中，默认加载第一个分段
• 监听video的ended事件，触发后自动把video的src替换为下一个分段的链接，调用play()继续播放
• 可以自行维护总时长、当前播放进度映射关系，给用户展示完整的进度条，而不是单个分段的时长
  该方案的缺点是分段切换的瞬间会有极短的停顿，高要求场景不推荐

方案3：HLS协议实现（适合大流量、多清晰度场景） #

如果你的分段是TS格式，可以把所有分段的信息整理成.m3u8索引文件，前端引入对应的解析库即可直接播放，会自动处理分段加载、调度逻辑，天然支持清晰度切换、断点续播等能力。

内容的提问来源于stack exchange，提问作者Aika Otsuka