HTML5 MediaSource 适用于某些 mp4 文件而不适用于其他文件(相同的编解码器)
grandyang
阅读：72
2025-05-04 20:05:19
评论：0
我在玩 MediaSource API。代码直接取自 Mozilla 的示例页面:https://developer.mozilla.org/en-US/docs/Web/API/MediaSource/endOfStream
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<video controls></video>
<script>
var video = document.querySelector('video');
var assetURL = 'frag_bunny.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource;
//console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec);
}
function sourceOpen (_) {
//console.log(this.readyState); // open
var mediaSource = this;
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
fetchAB(assetURL, function (buf) {
sourceBuffer.addEventListener('updateend', function (_) {
mediaSource.endOfStream();
video.play();
//console.log(mediaSource.readyState); // ended
});
sourceBuffer.appendBuffer(buf);
});
};
function fetchAB (url, cb) {
console.log(url);
var xhr = new XMLHttpRequest;
xhr.open('get', url);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
cb(xhr.response);
};
xhr.send();
};
</script>
</body>
</html>
除非我使用另一个视频，否则这很好用。
我有一个简短的测试 mp4，根据 Bento4 的 mp4info，它使用与 frag_bunny.mp4 相同的编解码器进行编码。它在
mediaSource.endOfStream(); 崩溃因为
Uncaught DOMException: Failed to execute 'endOfStream' on 'MediaSource': The MediaSource's readyState is not 'open'.
at SourceBuffer.<anonymous>
我认为视频文件必须满足一些特定的标准才能使用它，但我不知道它们。
有人可以指出我正确的方向吗？
有关文件的更多详细信息
frag_bunny mp4info
File:
major brand: mp42
minor version: 1
compatible brand: mp42
compatible brand: avc1
compatible brand: iso5
Movie:
duration: 60095 ms
time scale: 1000
fragments: yes
Found 4 Tracks
Track 1:
flags: 7 ENABLED IN-MOVIE IN-PREVIEW
id: 1
type: Audio
duration: 60095 ms
language: eng
media:
sample count: 0
timescale: 22050
duration: 0 (media timescale units)
duration: 0 (ms)
bitrate (computed): 65.075 Kbps
Sample Description 0
Coding: mp4a (MPEG-4 Audio)
Stream Type: Audio
Object Type: MPEG-4 Audio
Max Bitrate: 0
Avg Bitrate: 64000
Buffer Size: 6144
Codecs String: mp4a.40.2
MPEG-4 Audio Object Type: 2 (AAC Low Complexity)
MPEG-4 Audio Decoder Config:
Sampling Frequency: 22050
Channels: 2
Sample Rate: 22050
Sample Size: 16
Channels: 2
Track 2:
flags: 7 ENABLED IN-MOVIE IN-PREVIEW
id: 2
type: Video
duration: 60095 ms
language: eng
media:
sample count: 0
timescale: 600
duration: 0 (media timescale units)
duration: 0 (ms)
bitrate (computed): 612.178 Kbps
display width: 640.000000
display height: 360.000000
Sample Description 0
Coding: avc1 (H.264)
Width: 640
Height: 360
Depth: 24
AVC Profile: 66 (Baseline)
AVC Profile Compat: e0
AVC Level: 30
AVC NALU Length Size: 4
AVC SPS: [2742e01ea9181405ff2e00d418041adb0ad7bdf010]
AVC PPS: [28de09c8]
Codecs String: avc1.42E01E
Track 3:
flags: 7 ENABLED IN-MOVIE IN-PREVIEW
id: 3
type: Hint
duration: 60095 ms
language: eng
media:
sample count: 0
timescale: 90000
duration: 0 (media timescale units)
duration: 0 (ms)
bitrate (computed): 45.859 Kbps
Sample Description 0
Coding: rtp (RTP Hints)
Track 4:
flags: 7 ENABLED IN-MOVIE IN-PREVIEW
id: 4
type: Hint
duration: 60095 ms
language: eng
media:
sample count: 0
timescale: 22050
duration: 0 (media timescale units)
duration: 0 (ms)
bitrate (computed): 5.510 Kbps
Sample Description 0
Coding: rtp (RTP Hints)
我的视频的 mp4info
File:
major brand: mp42
minor version: 0
compatible brand: mp42
compatible brand: isom
compatible brand: avc1
Movie:
duration: 5568 ms
time scale: 90000
fragments: no
Found 2 Tracks
Track 1:
flags: 1 ENABLED
id: 1
type: Video
duration: 5533 ms
language: und
media:
sample count: 166
timescale: 90000
duration: 498000 (media timescale units)
duration: 5533 (ms)
bitrate (computed): 465.670 Kbps
display width: 560.000000
display height: 320.000000
frame rate (computed): 30.000
Sample Description 0
Coding: avc1 (H.264)
Width: 560
Height: 320
Depth: 24
AVC Profile: 66 (Baseline)
AVC Profile Compat: c0
AVC Level: 30
AVC NALU Length Size: 4
AVC SPS: [6742c01e9e218118534d40404050000003001000000303c8f162ee]
AVC PPS: [68ce06cb20]
Codecs String: avc1.42C01E
Track 2:
flags: 3 ENABLED IN-MOVIE
id: 2
type: Audio
duration: 5568 ms
language: eng
media:
sample count: 261
timescale: 48000
duration: 267264 (media timescale units)
duration: 5568 (ms)
bitrate (computed): 83.050 Kbps
Sample Description 0
Coding: mp4a (MPEG-4 Audio)
Stream Type: Audio
Object Type: MPEG-4 Audio
Max Bitrate: 91632
Avg Bitrate: 83051
Buffer Size: 280
Codecs String: mp4a.40.2
MPEG-4 Audio Object Type: 2 (AAC Low Complexity)
MPEG-4 Audio Decoder Config:
Sampling Frequency: 48000
Channels: 1
Sample Rate: 48000
Sample Size: 16
Channels: 1
Chrome 版本:55.0.2883.95(64 位)
请您参考如下方法:
如果 mp4 碎片化，t 工作正常。你可以使用bento4的来做到这一点。 mp4fragment 您可以在此处找到的工具:
https://www.bento4.com/documentation/mp4fragment/
声明
1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。
