7

更新：

所以我能够通过使用 offsetTimestamp 属性（在附加每个视频后增加它）来让它工作。

我现在的问题：1）为什么在将 MediaSource.mode 设置为序列时没有正确完成？

2) 为什么我的 MediaSource.duration 总是“无限”而不是正确的持续时间？

我正在尝试使用 MediaSource API 附加多个视频文件并无缝播放它们，就好像它是 1 个视频一样。

我已经根据规范（DASH-MPEG）正确地对我的视频进行了转码，并且在单独播放它们时，它们工作正常。

但是，当我尝试追加多个时，我遇到了片段相互覆盖、持续时间不正确等问题。即使一切似乎都按预期执行。

我尝试过使用 offsetTimestamp，但根据文档将 MediaSource.mode 设置为 'sequence' 应该会自动处理这个问题。此外，出于某种原因，MediaSource.duration 似乎总是“无限”，即使在附加一个段之后也是如此。

这是我的代码：

<script>
 function downloadData(url, cb) {
    console.log("Downloading " + url);

    var xhr = new XMLHttpRequest;
    xhr.open('get', url);
    xhr.responseType = 'arraybuffer';
    xhr.onload = function () {
        cb(new Uint8Array(xhr.response));
    };
    xhr.send();
}

if (MediaSource.isTypeSupported('video/mp4; codecs="avc1.64001E"')) {
    console.log("mp4 codec supported");
}

var videoSources = [
    "{% static 'mp4/ff_97.mp4' %}",
    "{% static 'mp4/ff_98.mp4' %}",
    "{% static 'mp4/ff_99.mp4' %}",
    "{% static 'mp4/ff_118.mp4' %}"
]

var mediaSource = new MediaSource();


mediaSource.addEventListener('sourceopen', function(e) {


    var sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001E"');
    sourceBuffer.mode = 'sequence';

    console.log('SourceBuffer mode set to ' + sourceBuffer.mode);

    sourceBuffer.addEventListener('updateend', function(e) {
        console.log('Finished updating buffer');
        console.log('New duration is ' + String(mediaSource.duration));

        if (videoSources.length == 0) {
            mediaSource.endOfStream();
            video.currentTime = 0;
            video.play();
            return;
        }

        downloadData(videoSources.pop(), function(arrayBuffer) {
            console.log('Finished downloading buffer of size ' + String(arrayBuffer.length));
            console.log('Updating buffer');
            sourceBuffer.appendBuffer(arrayBuffer);
        });

        console.log('New duration: ' + String(mediaSource.duration));

    });

    downloadData(videoSources.pop(), function(arrayBuffer) {
        console.log('Finished downloading buffer of size ' + String(arrayBuffer.length));
        console.log('Updating buffer');
        sourceBuffer.appendBuffer(arrayBuffer);
    });



}, false);

var video = document.querySelector('video');
video.src = window.URL.createObjectURL(mediaSource);

这是日志：

mp4 codec supported
(index):78 SourceBuffer mode set to sequence
(index):45 Downloading /static/mp4/ff_118.mp4
(index):103 Finished downloading buffer of size 89107
(index):104 Updating buffer
(index):81 Finished updating buffer
(index):82 New duration is Infinity
(index):45 Downloading /static/mp4/ff_99.mp4
(index):98 New duration: Infinity
(index):92 Finished downloading buffer of size 46651
(index):93 Updating buffer
(index):81 Finished updating buffer
(index):82 New duration is Infinity
(index):45 Downloading /static/mp4/ff_98.mp4
(index):98 New duration: Infinity
(index):92 Finished downloading buffer of size 79242
(index):93 Updating buffer
(index):81 Finished updating buffer
(index):82 New duration is Infinity
(index):45 Downloading /static/mp4/ff_97.mp4
(index):98 New duration: Infinity
(index):92 Finished downloading buffer of size 380070
(index):93 Updating buffer
(index):81 Finished updating buffer
(index):82 New duration is Infinity
4

2 回答 2

4

2) 为什么我的 MediaSource.duration 总是“无限”而不是正确的持续时间？

您需要调用MediaSource.endOfStream()MediaSource 对象来计算其SourceBuffer. 我看到您正在这样做，但看起来您正在尝试MediaSource.duration在调用endOfStream(). 我建议您阅读 MSE Spec 中的end of stream algorithm，您会注意到它会导致调用持续时间更改算法。

如果你想让你的<video>元素在调用之前报告一个持续时间MediaSource.endOfStream()，你实际上可以根据你自己对附加段的估计来设置一个值。MediaSource.duration

1) 为什么在将 MediaSource.mode 设置为序列时没有正确完成？

据我所知，应该可以。但是我自己更喜欢显式timestampOffset方法，因为它在想要在缓冲区中很远的地方追加段时提供了更大的灵活性（即，如果用户在当前缓冲区结束之前寻找方式，您将希望在间隙后开始加载+追加）。尽管我很欣赏在您的用例中寻求我不是一个要求。

于 2016-02-06T16:57:15.157 回答
0
  1. 为什么将 MediaSource.mode 设置为 sequence 时没有正确完成？

您必须稍后在代码中执行此操作。具体什么时候？我不确定。当我在附加之前正确执行此操作时，它可以工作。

sourceBuffer.mode = 'sequence';
sourceBuffer.appendBuffer(chunk);
于 2021-12-21T01:10:03.387 回答