Playing audio stream using html5

Question

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

<!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

Server side control is not in my hand, i'm given streaming URLs that work on VLC but not in wem. — user2009750, Mar 24 '14 at 05:58

score 3 · Accepted Answer · answered Apr 07 '14 at 15:59

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>

RTSP can be played on Android via an a tag in Chrome:

<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>

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).

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>

Though HTML5 video is protocol agnostic it is dependent on the web browser/OS manufacturer implementation and that can vary along time and manufacturers.

I need a solution which is cross, platform, and about mobiles it is working on most smartphones, and about a tag i am not sure if its a good idea because that takes user to mobile's native browser, so in that case I have no control over when the stream ends so I can bind corresponding events to it to create some sort of web music player. — user2009750, Apr 07 '14 at 16:40
For desktop there is a HLS to flash plugin here: https://github.com/denivip/osmf-hls-plugin. That means you are ok to use flash for your project for desktop support ... — Arnaud Leyder, Apr 07 '14 at 16:53
Yes i am OK with flash player but flash player is last option for me :P — user2009750, Apr 07 '14 at 16:59

johhny_apaleftos · Answer 2 · 2014-10-16T10:34:19.857

-1

<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.

edited Oct 16 '14 at 10:34

answered Oct 15 '14 at 16:04

johhny_apaleftos

9
5

Playing audio stream using html5

2 Answers2