如何在Angular应用中用<video>标签播放H264编码直播流？

首先，直播流能否在浏览器播放，核心取决于编码格式和传输协议：

1. 编码兼容性判断 #

从你提供的编码信息来看，如果是以下组合，所有现代浏览器（Chrome、Firefox、Safari、Edge）都原生支持：

• 视频编码：H.264（AVC，Baseline/Main/High profile）
• 音频编码：AAC-LC

这是MP4容器最标准的兼容编码组合，VLC能正常播放的话，大概率是这个组合。但如果是其他编码（比如VP9、MPEG-2视频，或MP3以外的非AAC音频），部分浏览器会出现不兼容的情况。

2. 代码优化建议 #

你当前的<source>标签仅指定了type="video/mp4"，建议补充完整的编码参数，让浏览器提前判断兼容性，避免加载后才发现不支持：

<video #videoPlayer id="video" preload="auto" muted>
  <source #videoSrc type="video/mp4; codecs=avc1.42E01E, mp4a.40.2">
  Your browser does not support the video tag.
</video>

其中avc1.42E01E对应H.264 Baseline profile，mp4a.40.2对应AAC-LC音频，是兼容性最广的参数配置。

3. 直播协议的影响 #

不同的直播协议，浏览器支持情况不同：

• HTTP-FLV/MP4流：大部分现代浏览器原生支持，直接用video标签即可播放。
• HLS（.m3u8）：Safari原生支持，Chrome/Firefox需要借助hls.js库实现播放。
• RTMP：浏览器原生不支持，需要转成HLS/DASH等HTTP协议的流才能正常播放。

快速测试方法 #

直接把直播链接复制到浏览器地址栏打开，如果能正常播放，那补充编码参数后的video标签肯定能正常工作；如果不能，就检查编码是否符合H.264+AAC标准，或协议是否需要转码/用第三方库适配。

内容的提问来源于stack exchange，提问作者lukas23