使用 html5 播放音频流答案

【问题标题】：Playing audio stream using html5使用 html5 播放音频流
【发布时间】：2014-10-16 18:34:19
【问题描述】：

如何播放带有 HTML5 音频标签的 RTSP 流，我已经检查了来自 wowza http 和 RTSP 的流链接都可以在 VLC 上完美运行，但是当我将这些链接嵌入到 html5 音频标签中时，似乎没有任何帮助将不胜感激。这是我的 HTML5 代码

<!DOCTYPE html>
<html>
    <body>
        <audio controls>
            <source src="http://[ServerIP]:1935/bw/_definst_/mp3:audio/64kbps/A_B_C_D_Any_Body_Can_Dance_Bezubaan.mp3/playlist.m3u8" type="audio/mpeg">
            Audio not supported 
        </audio>
    </body>
</html>

编辑：Stream 可以在智能手机上完美运行，但不能在 PC 浏览器上运行

【问题讨论】：

你应该看看 MPEG-DASH。
服务器端控制不在我手中，我得到了在 VLC 上有效但在 wem 中无效的流式 URL。

标签： javascript html streaming rtsp wowza

【解决方案1】：

HLS（m3u8 文件）将在 iOS（和一些 Android，但支持可能很笨重）和 Mac OS Safari 上以 HTML5 音频标签播放： <video width="640" height="360" preload="auto" controls src="http://[ServerIP]:1935/vod/test.mp4/playlist.m3u8"></video>

RTSP 可以通过 Chrome 中的 a 标签在 Android 上播放：

<div id="myElement">
<a href="rtsp://[ServerIP]:1935/vod/mp4:test.mp4">watch this stream over RTSP</a>
</div>

RTSP 应该在 Android 上的 HTML5 视频标签中工作，但只能在本机浏览器上工作（这是我的经验，我通常使用 a 标签，因为 Chrome 现在是 Android 4+ 中的默认浏览器）：<video width="640" height="360" preload="auto" controls src="rtsp://[ServerIP]:1935/vod/sample.mp4"> </video>

要支持台式电脑，请提供指向视频标签 src（mp3、ogg、wav ..）的下载链接，或者如果您必须使用流媒体协议，则需要使用 Flash 等插件（并提供它RTMP 或 HDS 源）。

有一个用于网络浏览器的 VLC 插件可以允许播放 RTSP 流，但它位于 embed 标签中： <embed TYPE="application/x-vlc-plugin" autoplay="no" loop="no" width="640" height="360" target="rtsp://[ServerIP]:1935/vod/sample.mp4"></embed>

虽然 HTML5 视频与协议无关，但它依赖于网络浏览器/操作系统制造商的实施，并且可能随时间和制造商而变化。

【讨论】：

我需要一个跨平台的解决方案，它适用于大多数智能手机上的移动设备，关于一个标签，我不确定它是否是个好主意，因为这会将用户带到移动设备的本机浏览器，所以在这种情况下，我无法控制流何时结束，因此我可以将相应的事件绑定到它以创建某种网络音乐播放器。
对于桌面版，这里有一个 HLS to flash 插件：github.com/denivip/osmf-hls-plugin。这意味着您可以在项目中使用 flash 来支持桌面...
是的，我可以使用 Flash 播放器，但 Flash 播放器是我的最后选择：P

【解决方案2】：

<audio controls autoplay="autoplay"><source src="http://ip:port/;stream.mp3" type="audio/mp3">Your browser does not support the audio element.</audio>

在 ie10、ff-chrome(win7) 和 android、iphone/ipad 上为我工作，我正在等待在较旧的 ies-windows、safari 和 opera 上进行测试。不适用于 ie 8。

【讨论】：