使用javascript MediaSource Extension API播放H264视频时遇到问题。
我将在下面详细介绍该方案。
我已经成功实现了播放音频和视频源的结果 vp8，vp9，opus和vorbis编解码器，也来自范围请求（如果服务器具有使用任何字节范围的功能）或分块文件，使用shaka packager完成的块。
当源是H264视频时会出现问题，详情请参阅我的案例 编解码器是avc1.64001e和mp4a.40.2，完整的编解码器字符串是 video / mp4; codecs =＆＃34; avc1.64001e，mp4a.40.2＆＃34;但问题仍然发生在任何其他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）一起播放 更重要的是，使用＆lt; 将其添加到网页时没有问题。来源＆gt;标签
这是我在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播放该文件，因为它使用＆lt;来源＆gt;标签。 我不想对其进行解复用和重新编码，但请按原样使用。
下面是从chrome：// media-internals
获取的错误转储render_id：180 player_id：11 pipeline_state：kStopped事件： WEBMEDIAPLAYER_DESTROYED
要重现，我认为可以使用任何包含音频和视频轨道的H264视频。
这个问题与我发现的H264 video works using src attribute. Same video fails using the MediaSource API (Chromium)这个问题严格相关，但它是从4年前开始的，所以我决定不回答。
有人对这个问题有所了解吗？ 有没有办法解决它或h264它与MSE不兼容？
提前致谢
答案 0 :(得分：2)
它不是编解码器，它是容器。 MSE需要碎片化的mp4文件。不支持标准mp4。对于标准mp4，您必须使用<video src="my.mp4">