如何使用 HTML5 播放直播/冰播流？
Posted
技术标签:
【中文标题】如何使用 HTML5 播放直播/冰播流？【英文标题】：How could I play a shoutcast/icecast stream using HTML5? 【发布时间】：2011-02-14 03:45:31 【问题描述】：是否可以使用 html5 播放直播/冰播流？
如果是这样，我应该如何实现它？
【问题讨论】：
【参考方案1】：在 Chrome 9x 上如果您的网站通过 https 运行您的直播流 url 链接必须是 https url，例如：
<audio controls src='https://ssl-1.radiohost.pl:7028/stream' type='audio/mpeg' align='cemnter'>
Your browser does not support the audio element.
</audio>
【讨论】：
【参考方案2】：2020 年更新
现代浏览器不需要任何特殊处理或服务器端解决方法来播放音频。只需使用带有直接链接到一个或多个流源（不是播放列表）的音频标签：
<audio>
<source src="http://relay.publicdomainradio.org/classical.mp3" type="audio/mpeg">
</audio>
来自MDN：
HTML
<audio>元素 用于在文档中嵌入声音内容。它可能包含一个或多个音频源，使用src属性或<source>元素表示：浏览器将选择最合适的一个。
浏览器支持flac、mp3、vorbis、aac、opus和wav。更多详情请关注caniuse.com。
原帖
在 http 请求的末尾添加分号。它是由shoutcast 提出的覆盖它的浏览器检测的协议。像这样：
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>
【讨论】：
看来，现在（2020 年）音频元素无需任何调整即可处理 mp3 流。【参考方案3】：我将 Icecast 与 Easystream 一起用于流式传输到 mac 和 pc。脚本 设置名为 MP3 Sticky Player 的音频播放器。瑞士法郎 使用文档支持文件，播放器在两种情况下都加载如下。
电脑
<ul id="playlist" style="display:none;">
<li data-path="http://99.250.117.109:8000/stream" data-thumbpath="thumbnail of whatever" data-downloadable="no" data-duration="00:00">
</li>
</ul>
MAC
<audio style="width: 100%" controls="controls" autoplay="autoplay" src="http://99.250.117.109:8000/stream">
Your browser does not support the <code>audio</code> element.
</audio>
由于我们从任何 mp3 元数据中删除了图像，我们使用了一个图像加载器来获取 Icy-MetaData（仅供参考，您至少需要 php 5.4 才能正确运行）并为每个播放器歌曲流匹配一个封面艺术目录。
【讨论】：
【参考方案4】：关于浏览器中<audio> 标记的重定向问题，请尝试在流 URL 的末尾添加“/stream”以防止重定向。
示例：
不工作： http://live-radio01.xxxxxx.com/2TJW/mp3
工作： http://live-radio01.xxxxxx.com/2TJW/mp3/stream
【讨论】：
【参考方案5】：<audio src="http://85.25.108.20:8090/;" controls autoplay></audio>
这应该可以正常工作，但请确保/; 在流 URL 和端口之后。如果您不需要自动播放，请删除 “自动播放” 标签。
【讨论】：
我稍微编辑了你的帖子，当你在 Stack Overflow 上发帖时，请尽量使用正确的语法。除此之外，干得好！ 为什么需要/;？【参考方案6】：
SHOUTcast 存在一个大问题，我怀疑这是导致即使在应该支持 MP3 的 Chrome 中也无法正常工作的原因。
SHOUTcast 可以提供三种不同类型的响应：
原生 SHOUTcast “ICY”协议流式音频响应。如果访问流的播放器包含icy-metadata: 1 标头，则它决定执行此操作。
纯 HTTP 流式音频响应，没有额外的元数据，适用于不支持 ICY 的媒体播放器。
“SHOUTcast D.N.A.S.状态”页面和网页界面上的其他页面。
它如何决定是否提供网页而不是音频流？它会猜测您是否使用网络浏览器。通过查看User-Agent 标头是否以Mozilla/... 开头。因为所有的网络浏览器都是 Mozilla，对吧？天哪，SHOUTcast。
因此，当 Chrome 尝试获取要播放的音频流时，SHOUTcast 认为它是一个网络浏览器（嗯……确实如此）并拒绝将音频流放入音频标签中。相反，它会获取管理网页。
（我猜 Safari 正在传递 icy-metadata 标头以避免该问题，对 SHOUTcast 具有特定支持。我目前无法测试它，因为 Safari 不会播放音频或视频。也许它希望我为此安装 QuickTime。也许它会被塞满。）
因此，您可能需要添加 Flash 音频播放器作为后备。
【讨论】：
非常感谢您不仅说它不起作用而且还解释了原因！【参考方案7】：请看这里：Is it possible to play shoutcast internet radio streams with html5?
【讨论】：
【参考方案8】：是的。但它只适用于 Safari
<!DOCTYPE html>
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/"></audio>
因为 Opera 和 Firefox 不支持非免费编解码器
【讨论】：
以上是关于如何使用 HTML5 播放直播/冰播流？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 html5 视频标签播放 Apple HLS 直播