html5-video - Browser MIME type for playing H.264 video file

Question

I have a file produced from an encoding process that is in H.264 Annex B format, not wrapped in any container like MP4. I'm trying to figure out how to make this file playable in browser using <video> element. No matter what MIME type I try, it fails.

I know the file is good and browser has necessary facilities to decode it, because a) same exact content was previously streamed for WebRTC session that browser was able to decode and play, and b) the saved file is trivially playable with ffplay myfile.h264.

The HTML attempted for playing that file used the following <source> elements (ignore non-HTML formating pieces as those are cut from source-code directly):

<source src={this.props.src} type={'video/avc'} />
<source src={this.props.src} type={'video/H264-SVC'} />
<source src={this.props.src} type={'video/H264'} />
<!-- Ones below are more of a desperation attempts :)  -->
<source src={this.props.src} type={'video/mp4'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.66.13, mp4a.40.2"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.42e01e, mp4a.40.2"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.66.30, mp4a.40.5"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.42001e, mp4a.40.5"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.42001f, mp4a.40.5"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.77.30, mp4a.40.5"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.4d001e, mp4a.40.5'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.4d001f, mp4a.40.5"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.640029, mp4a.40.5'} />
<source src={this.props.src} type={'video/mp4; codecs="mp4a.40.2"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.4d002a"'} />
<source src={this.props.src} type={'video/mp4; codecs="avc1.4d001e, mp4a.40.2"'} />
<source src={this.props.src} type={'application/x-mpegurl'} />
<source src={this.props.src} type={'application/vnd.apple.mpegurl'} />

None work.

Since browser can play it via WebRTC channel, and since it's trivially playable using ffplay (that is, format is self-describing and contains all necessary info for playback), I'd expect <video> to be able to play it.

Also small note, Android references AVC (aka h264) codec as video/avc, so that's where I pulled that one from, but that still fails.

What's the proper MIME type for playing straight up H.264 AVC content?

标签： html5-videoh.264