HTML5 video标签移动端无法播放MPEG-TS电视流问题求助

我来帮你搞定这个跨设备播放的坑。首先梳理下核心情况：你的源是MPEG-TS流，桌面Chrome用video/webm容器能正常播放，但安卓平板和iOS完全不行。下面是分步骤的排查和解决思路：

1. 先搞定编码和容器的兼容性问题 #

移动端浏览器对webm的支持一直是个痛点：

• iOS直到iOS 14才开始支持webm，而且只认VP9+Opus的编码组合，要是你的服务器输出的webm用的是VP8或者其他编码，直接就歇菜了。
• 安卓的Chrome虽然支持webm，但旧版本平板的系统浏览器可能不兼容。

既然你的源本身是MPEG-TS，不如直接给移动端喂原生支持更好的TS流试试。修改你的video标签，把source换成video/mp2t类型的TS流（需要服务器能输出这个格式，比如把profile改成ts）：

<video id="player1" width="640" height="360" preload="none" controls playsinline webkit-playsinline>
  <source src="http://192.168.1.72:9981/stream/channelid/2013555866?ticket=388550710ddf21ad5c6ffd61fcd3d0dc24cf46d2&profile=ts" type="video/mp2t">
</video>

⚠️ 重点：确保服务器输出的TS流是H.264视频+AAC音频的组合，这是所有移动端浏览器都能解码的黄金组合。

2. 检查playsinline和响应头配置 #

虽然你已经加了playsinline和webkit-playsinline，但iOS上还有两个坑：

• 确保你的流媒体服务器返回的响应头里没有Content-Disposition: attachment，这个头会让iOS把流当成下载文件，直接触发全屏播放或者无法加载。
• 部分安卓浏览器（比如腾讯系）可能需要额外加x5-playsinline属性，但先优先搞定编码问题，这个是次要的。

3. 排查流媒体服务器的输出配置 #

从URL的9981和channelid来看，你应该用的是tvheadend？那直接去服务器的profile配置里：

• 把matroska（对应webm）的profile换成ts或者mpegts，确保输出的是标准H.264/AAC的TS流。
• 调整流的码率和分辨率，比如把码率降到2Mbps以下，分辨率设为720p，避免移动端解码压力过大。

4. 终极备选：切换到HLS流 #

如果TS流还是不行，直接上HLS（HTTP Live Streaming）协议，这是iOS原生支持的流媒体标准，安卓4.4+也完美兼容。修改video标签如下：

<video id="player1" width="640" height="360" preload="none" controls playsinline webkit-playsinline>
  <source src="http://192.168.1.72:9981/stream/channelid/2013555866?ticket=388550710ddf21ad5c6ffd61fcd3d0dc24cf46d2&profile=hls" type="application/x-mpegURL">
</video>

只要服务器能输出HLS流，移动端播放基本不会有问题。

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