Javascript MediaSource API和H264视频
我在使用javascript MediaSource扩展API播放H264视频时遇到问题。
我将在下面详细描述这个场景。
我已经成功地实现了播放vp8、vp9、opus和vorbis编解码器的音频和视频源的结果，也可以从range请求(如果服务器有能力，使用任何字节范围)或分块文件，使用shaka packager完成分块。
当源是H264视频时，问题就来了，在我的例子中，详细的编解码器是avc1.64001e和mp4a.40.2，完整的编解码器字符串是视频/mp4；编解码器=“avc1.64001e，mp4a.40.2”，但这个问题仍然发生在任何其他avc1编解码器上。
我试图做的是播放完整视频的10兆字节的块，这是由byterange curl请求生成的块，使用-o在本地保存响应。
下面是来自shaka packager的流信息，将此文件作为输入进行传递
[0530/161459:INFO:demuxer.cc(88)] Demuxer::Run() on file '10mega.mp4'.
[0530/161459:INFO:demuxer.cc(160)] Initialize Demuxer for file '10mega.mp4'.
File "10mega.mp4":
Found 2 stream(s).
Stream [0] type: Video
codec_string: avc1.64001e
time_scale: 17595
duration: 57805440 (3285.3 seconds)
is_encrypted: false
codec: H264
width: 720
height: 384
pixel_aspect_ratio: 1:1
trick_play_factor: 0
nalu_length_size: 4
Stream [1] type: Audio
codec_string: mp4a.40.2
time_scale: 44100
duration: 144883809 (3285.3 seconds)
is_encrypted: false
codec: AAC
sample_bits: 16
num_channels: 2
sampling_frequency: 44100
language: und
Packaging completed successfully.该块可以使用外部媒体播放器应用程序(如VLC )播放，更重要的是，使用<>标签将其添加到网页上没有问题。
这是我在Chrome控制台中看到的错误
Uncaught (in promise) DOMException: Failed to load because no supported source was found.下面是html和js代码，如果你想重现的话(我使用内置的php7.2dev服务器做了所有的本地测试)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>VideoTest</title>
<link rel="icon" href="/favicon.ico" />
<script type="text/javascript" src="/script.js"></script>
<style>
video {
width: 98%;
height: 300px;
border: 0px solid #000;
display: flex;
}
</style>
</head>
<body>
<div id="videoContainer">
<video controls></video>
</div>
<video controls>
<source src="/media/10mega.mp4" type="video/mp4">
</video>
</body>
</html>下面是JS代码( scripjs )
class MediaTest {
constructor() {
}
init(link) {
this.link = link;
this.media = new MediaSource();
this.container = document.getElementsByTagName('video')[0];
this.container.src = window.URL.createObjectURL(this.media);
return new Promise(resolve => {
this.media.addEventListener('sourceopen', (e) => {
this.media = e.target;
return resolve(this);
});
});
}
addSourceBuffer() {
let codec = 'video/mp4;codecs="avc1.64001e, mp4a.40.2"';
let sourceBuffer = this.media.addSourceBuffer(codec);
// These are the same headers sent by the < source > tag
// with or without the issue remains
let headers = new Headers({
'Range': 'bytes=0-131072',
'Accept-Encoding': 'identity;q=1, *;q=0'
});
let requestData = {
headers: headers
};
let request = new Request(this.link, requestData);
return new Promise(resolve => {
fetch(request).then((response) => {
if(200 !== response.status) {
throw new Error('addSourceBuffer error with status ' + response.status);
}
return response.arrayBuffer();
}).then((buffer) => {
sourceBuffer.appendBuffer(buffer);
console.log('Buffer appended');
return resolve(this);
}).catch(function(e) {
console.log('addSourceBuffer error');
console.log(e);
});
});
}
play() {
this.container.play();
}
}
window.addEventListener('load', () => {
let media = new MediaTest();
media.init('/media/10mega.mp4').then(() => {
console.log('init ok');
return media.addSourceBuffer();
}).then((obj) => {
console.log('play');
media.play();
});
});我想要实现的是使用MediaSource接口播放文件，因为它使用标签播放得很好。我不想对其进行多路复用和重新编码，但请按原样使用它。
下面是取自chrome://media-internals的错误转储
render_id: 180 player_id: 11 pipeline_state: kStopped event: WEBMEDIAPLAYER_DESTROYED
为了再现，我认为可以使用任何包含音频和视频轨道的H264视频。
这个问题与我发现的H264 video works using src attribute. Same video fails using the MediaSource API (Chromium)的另一个问题严格相关，但它是4年前的问题，所以我决定不在这里回答。
有谁知道这个问题吗？有没有办法解决它或h264它就是不兼容MSE？
提前感谢
回答 1
Stack Overflow用户
发布于 2018-05-31 09:36:54
这不是编解码器，而是容器。MSE需要零碎的mp4文件。不支持标准mp4。对于标准mp4，必须使用<video src="my.mp4">
https://stackoverflow.com/questions/50614857
复制相似问题