我在使用 javascript MediaSource Extension API 播放 H264 视频时遇到问题。
我将在下面详细描述该场景。
我已经成功实现了播放音视频源的效果 vp8、vp9、opus 和 vorbis 编解码器，也来自范围请求(如果服务器有能力，使用任何字节范围)或分块文件，使用 shaka packager 完成的分块。
当源是 H264 视频时，问题就来了，在我的例子中有详细说明 编解码器是 avc1.64001e 和 mp4a.40.2，完整的编解码器字符串是 video/mp4;codecs="avc1.64001e, mp4a.40.2"但问题仍然发生在任何其他 avc1 编解码器上。
我想做的是播放一个 10 兆字节的完整视频 block ， 由 byterange curl 请求生成的 block 使用 -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.
该 block 可以使用外部媒体播放器应用程序(如 VLC)播放 更重要的是，使用 < source > 标签将其添加到网页时可以毫无问题地播放。
这是我在 Chrome 控制台中看到的错误
Uncaught (in promise) DOMException: Failed to load because no supported source was found.
如果你想重现，请在下面的 html 和 js 代码(我使用内置的 php7.2 开发服务器进行了所有本地测试)
<!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 API 播放文件，因为它使用 < source > 标签播放效果很好。 我不想对其进行解复用和重新编码，而是按原样使用它。
下面是从 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呢？
提前致谢
最佳答案
它不是编解码器，而是容器。 MSE 需要碎片化的 mp4 文件。不支持标准 mp4。对于标准 mp4，您必须使用 <video src="my.mp4">
关于Javascript MediaSource API 和 H264 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50614857/