本文共 3003 字,大约阅读时间需要 10 分钟。
更新:
所以我能够通过使用offsetTimestamp属性(在附加每个视频后递增它)来使其工作.
我现在的问题:
1)为什么在将MediaSource.mode设置为序列时没有正确完成?
2)为什么我的MediaSource.duration总是“无限”而不是正确的持续时间?
我正在尝试使用MediaSource API附加多个视频文件并无缝播放,就好像它是1个视频一样.
我根据规范(DASH-MPEG)正确地对我的视频进行了转码,当单独播放时,它们工作正常.
但是,当我尝试追加多个时,我遇到的问题是段相互覆盖,持续时间不正确等等.即使所有内容似乎都按预期执行.
我已经尝试过使用offsetTimestamp,但根据文档设置MediaSource.mode到’sequence’应该自动处理这个.此外,出于某种原因,MediaSource.duration即使在追加一个片段之后也总是似乎是“无限”.
这是我的代码:
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
转载地址:https://blog.csdn.net/weixin_33152959/article/details/117841555 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!