javascript 使用 html5 播放音频流
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/22296991/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Playing audio stream using html5
提问by ????? ?????
How can i play RTSP streams with HTML5 audio tag, I already check streaming links from wowza http and RTSP both work perfectly on VLC but when I embed these links in html5 audio tag, nothing seems to work any help would be appreciated. Here is my HTML5 code
我如何使用 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>
Edit: Stream works on smartphones perfectly, but doesn't work on PC browsers
编辑:Stream 完美适用于智能手机,但不适用于 PC 浏览器
采纳答案by Arnaud Leyder
HLS (m3u8 files) will play on iOS (and some Android but support can be clunky) and Mac OS Safari in an HTML5 audio tag:
<video width="640" height="360" preload="auto" controls src="http://[ServerIP]:1935/vod/test.mp4/playlist.m3u8"></video>
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 can be played on Android via an a tag in Chrome:
RTSP 可以通过 Chrome 中的 a 标签在 Android 上播放:
<div id="myElement">
<a href="rtsp://[ServerIP]:1935/vod/mp4:test.mp4">watch this stream over RTSP</a>
</div>
RTSP should work in a HTML5 video tag on Android but only on the native browser (well that is my experience of it I normally use the a tag as Chrome is now the default browser in Android 4+): <video width="640" height="360" preload="auto" controls src="rtsp://[ServerIP]:1935/vod/sample.mp4">
</video>
RTSP 应该在 Android 上的 HTML5 视频标签中工作,但只能在本机浏览器上工作(这是我的经验,我通常使用 a 标签,因为 Chrome 现在是 Android 4+ 中的默认浏览器): <video width="640" height="360" preload="auto" controls src="rtsp://[ServerIP]:1935/vod/sample.mp4">
</video>
To support desktop PC, either provide a download link to the video tag src (mp3, ogg, wav ..) or if you have to use a streaming protocol you will need to resort to a plugin like Flash (and feed it a RTMP or HDS feed).
要支持台式机,请提供视频标签 src(mp3、ogg、wav ..)的下载链接,或者如果您必须使用流媒体协议,您将需要求助于 Flash 等插件(并为其提供 RTMP 或HDS 饲料)。
There is the VLC plugin for web browsers that can allow playback of RTSP streams but that is in an embed tag:
<embed TYPE="application/x-vlc-plugin" autoplay="no" loop="no" width="640" height="360" target="rtsp://[ServerIP]:1935/vod/sample.mp4"></embed>
有用于 Web 浏览器的 VLC 插件可以允许播放 RTSP 流,但它位于嵌入标签中:
<embed TYPE="application/x-vlc-plugin" autoplay="no" loop="no" width="640" height="360" target="rtsp://[ServerIP]:1935/vod/sample.mp4"></embed>
Though HTML5 video is protocol agnostic it is dependent on the web browser/OS manufacturer implementation and that can vary along time and manufacturers.
尽管 HTML5 视频与协议无关,但它依赖于 Web 浏览器/操作系统制造商的实现,并且会随着时间和制造商而变化。
回答by johhny_apaleftos
<audio controls autoplay="autoplay"><source src="http://ip:port/;stream.mp3" type="audio/mp3">Your browser does not support the audio element.</audio>
worked for me on ie10, ff-chrome(win7) and android, iphone/ipad, im waiting to test on older ies-windows, safari and opera. Will not work on ie 8.
在 ie10、ff-chrome(win7) 和 android、iphone/ipad 上对我来说有效,我正在等待在较旧的 ies-windows、safari 和 opera 上进行测试。不适用于 ie 8。