HTML5 MediaSource 适用于某些 mp4 文件，而不适用于其他文件（相同的编解码器）
Posted
技术标签:
【中文标题】HTML5 MediaSource 适用于某些 mp4 文件，而不适用于其他文件（相同的编解码器）【英文标题】：HTML5 MediaSource works with some mp4 files and not with others (same codecs) 【发布时间】：2017-07-03 05:03:26 【问题描述】：我在玩 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 位）
【问题讨论】：
为什么这被否决了？ 【参考方案1】：如果 mp4 碎片化，则可以正常工作。你可以使用 bento4 的 mp4fragment 工具来做到这一点，你可以在这里找到： https://www.bento4.com/documentation/mp4fragment/
【讨论】：
【参考方案2】：要以 Xander 的回答为基础，看看视频的打包和流式传输方式很有用：
相机拍摄“原始”图像 - 通常是大像素位图 编码器将每个帧编码为更有效的存储和传输格式 - 示例编码器是 h.264、h.265、vp9 等。毫无价值的是，每个配置文件中都有不同的配置文件（所以一个 h .264 编码的视频可能会在特定设备/客户端上播放，而另一个可能不会）。 视频流被打包到一个容器中，例如mp4。此容器通常包含视频、音频、元数据、字幕（如果存在）等流。 如果要使用自适应比特率流协议（如 HLS 或 DASH）流式传输视频，则视频容器将被分成等长的片段，例如10 秒段，客户端可以一次请求一个。如果视频在多个比特率视频流中可用，这允许客户端从最匹配当前网络条件的比特率中选择下一个片段。正如 Xander 所说，上面的代码旨在处理以这种方式分段或分段的 MP4 文件，而不是未分段的 mp4 视频文件。
【讨论】：
以上是关于HTML5 MediaSource 适用于某些 mp4 文件，而不适用于其他文件（相同的编解码器）的主要内容，如果未能解决你的问题，请参考以下文章
如何下载（或以 blob 形式获取）用于流式传输 HTML5 视频的 MediaSource？
在 MediaSource HTML5 中播放 MediaRecorder 块——视频冻结