所以我能够通过使用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
解决方法
2) Why is my MediaSource.duration always “Infinity” and not the correct duration?
您需要调用MediaSource.endOfStream()
以使MediaSource对象计算其SourceBuffer中段的实际持续时间.我看到你正在这样做,但看起来你在调用endOfStream()之前试图访问MediaSource.duration.我建议你阅读MSE规范中的end of stream algorithm,你会发现它会导致调用duration change algorithm.
如果你想要你的< video> element在调用MediaSource.endOfStream()之前报告持续时间,您实际上可以根据您自己对附加段的估计使用MediaSource.duration
设置一个值.
1) Why isn’t this done properly when setting the MediaSource.mode to sequence?
据我所知,应该这样做.但是我自己更喜欢显式的timestampOffset方法,因为它在想要在缓冲区中远远追加段时提供了更大的灵活性(即,如果用户在当前缓冲区结束之前寻找方式,你将需要在差距之后开始加载附加).虽然我很欣赏在你的用例中寻求我不是一个要求.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。