Javascript MediaSource API 和 H264 视频答案

【问题标题】：Javascript MediaSource API and H264 videoJavascript MediaSource API 和 H264 视频
【发布时间】：2018-11-09 21:49:39
【问题描述】：

我在使用 javascript MediaSource Extension API 播放 H264 视频时遇到问题。

我将在下面详细描述该场景。

我已经成功实现了播放音视频源的效果 vp8、vp9、opus 和 vorbis 编解码器，也来自范围请求（如果服务器有能力，使用任何字节范围）或分块文件，使用 shaka 打包器完成的分块。

当源是 H264 视频时，问题就来了，在我的例子中是详细的编解码器是 avc1.64001e 和 mp4a.40.2，完整的编解码器字符串是 video/mp4;codecs="avc1.64001e, mp4a.40.2" 但任何其他 avc1 编解码器仍然会出现此问题。

我想做的是播放 10 兆字节的完整视频，字节范围 curl 请求生成的块，使用 -o 在本地保存响应。

在来自 shaka 打包程序的流信息下方，将此文件作为输入传递

[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.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 播放文件，因为它使用标签播放得很好。 我不想对它进行解复用和重新编码，而是按原样使用它。

下面是从 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不兼容？

提前致谢

【问题讨论】：

标签： javascript video video-streaming html5-video media-source

【解决方案1】：

它不是编解码器，它是容器。 MSE 需要零碎的 mp4 文件。不支持标准 mp4。对于标准 mp4，您必须使用 <video src="my.mp4">

【讨论】：