用于以流为源的移动浏览器的 HTML 音频播放器答案

【问题标题】：HTML audio player for mobile browsers with stream as source用于以流为源的移动浏览器的 HTML 音频播放器
【发布时间】：2020-07-15 12:02:38
【问题描述】：

我使用 VLC 媒体播放器流式传输一些内容（音频）。现在我将它流式传输到我 PC 的端口 80 (http)。在另一台设备上，我打开 VLC 并可以使用 http://192.168.0.78/（源计算机的 IP）收听流。当我使用 VLC 应用收听内容时，它在手机上也能很好地播放。

现在，我尝试在网站上实现一个播放器，该播放器将流的 url 设为src，客户端只需打开网站并播放流（这有很多物流优势）。一个最小的例子可以查看here。该流在桌面浏览器上运行良好，但不能在移动浏览器上运行。不幸的是，没有错误消息或类似的东西可以表明问题的根源。

我尝试做的事情：

在 VLC 中使用不同的流编码（MP3、OGG 等）
使用第三方 HTML 播放器，例如 Media element、jPlayer、audio.js、Muses Radio Player 等等。它们在桌面浏览器上都可以正常工作，但在移动浏览器上却有问题
当模拟移动浏览器时，它可以在桌面浏览器上使用 F12 -> 响应式设计模式（例如在 Firefox 中）

我托管播放器的网站在 https 上运行，而流的来源是 http。在这一点上，我不知道这可能导致的问题，但仍然在这里提及。

有没有人在移动设备上使用以流为源的 HTML 播放器？

【问题讨论】：

【解决方案1】：

我托管播放器的网站在 https 上运行，而流的来源是 http。在这一点上，我不知道这可能导致的问题，但仍然在这里提及。

这实际上是问题所在。如果您打开浏览器的开发者工具，您将看到与此相关的错误消息。安全上下文中的页面无法再从不安全的上下文中加载数据。

理想情况下，您需要通过 HTTPS 提供流。否则，您将不得不通过 HTTP 提供您的页面。

另请注意，您在桌面浏览器上也有同样的问题。

【讨论】：

你确定吗？因为在桌面浏览器上它只是在控制台中给你一个警告，但仍然可以很好地播放。
@josibu 如果我不确定，我不会将其发布为答案...因为您在问题中没有提供示例代码，所以很难说哪个例外允许您在 HTTPS 页面上播放 HTTP 资源。
我知道这不一定是解决此类问题的正确位置，但是在尝试使用 VLC 设置 https 流但没有成功之后，您是否知道任何工具/软件这可能以更直接的方式进行吗？任何建议都非常感谢。
@josibu 您是在谈论托管 HTTPS 流吗？ Icecast 可以做到这一点。
没错，我想在公司内部网站上托管 HTTPS 流并尽可能避免使用互联网，因此 Icecast 和其他外部提供商不适合我。