有没有办法随机播放碎片化的 mp4？答案

【问题标题】：Is there a way to play fragmented mp4 at random chunk?有没有办法随机播放碎片化的 mp4？
【发布时间】：2021-01-31 23:08:44
【问题描述】：

假设有一个视频被渲染成由许多块/片段组成的分段 mp4。问题是：init 加载到 MediaSource 缓冲区后，有没有办法播放随机片段？

对事物规格的小型研究对问题的了解很少。片段似乎有一种硬编码的订单 ID。将它包含在一个文件中是一个相当合理的想法，以防在流式传输内容时出现不可靠的连接和异步获取，但是有没有办法使用 JavaScript 解析一个块并更改其 ID？

下面的代码只是播放 2 分钟的视频，根据用户的时间分成 12 个片段，并且应该能够从任何块开始（不仅是第一个块）然后重复。

let mediaSource = new MediaSource
document.getElementById('video').src = URL.createObjectURL(mediaSource)

mediaSource.addEventListener('sourceopen', () => {
    let buffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.42E01E, mp4a.40.2"')
    let loadToBuffer = url => {
        let xhr = new XMLHttpRequest
        xhr.responseType = 'arraybuffer'
        xhr.open('GET', url, true)
        xhr.addEventListener('loadend', () => buffer.appendBuffer(new Uint8Array(xhr.response)))
        xhr.send()
    }
    loadToBuffer('video/init.mp4')
    setInterval(() => loadToBuffer('video/video' + (Math.floor(new Date().getTime() / 1000 / 10) % 12) + '.m4s'), 10 * 1000)
})

【问题讨论】：

标签： javascript ffmpeg html5-video mp4 media-source

【解决方案1】：

当您在sourceBuffer 中加载片段时，这些片段包括演示时间戳 (PTS)，它们会将它们以正确的播放顺序放入缓冲区中。

您可以修改片段本身，为此您必须解析原子并更改 PTS（可能还有其他）值，或者更改视频元素 currentTime 属性，以便您可以播放视频已正确缓冲。

您可以检查视频元素对象上的buffered 属性以检查已加载的时间范围。

【讨论】：