有没有办法随机播放碎片化的 mp4?

Is there a way to play fragmented mp4 at random chunk?

假设有一个视频被渲染成由多个 chunks/fragments 组成的片段 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)
})

当您在 sourceBuffer 中加载片段时,这些片段包含呈现时间戳 (PTS),这会将它们按正确的播放顺序放入缓冲区。

您可以修改片段本身,为此您必须解析原子并更改 PTS(可能还有其他)值,或者更改视频元素 currentTime 属性,这样您就可以播放正确缓冲的视频。

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