Is it possible to play a shoutcast/icecast stream using HTML5?
If so, how should I implement it?
2020 update
Modern browsers don't need any special treatment or server-side workarounds to play audio. Simply use an audio tag with a direct link to one or more stream sources (not a playlist):
<audio>
<source src="http://relay.publicdomainradio.org/classical.mp3" type="audio/mpeg">
</audio>
From MDN:
The HTML <audio> element is used to embed sound content in documents. It may contain one or more audio sources, represented using the src attribute or the <source> element: the browser will choose the most suitable one.
Browsers support flac, mp3, vorbis, aac, opus and wav. More details on caniuse.com.
Original post
Add a semicolon to the end of the http request. It IS the protocol set forth by shoutcast to override it's browser detection. Like this:
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/;"></audio>
There is a big problem with SHOUTcast, which I suspect is responsible for it not working even in Chrome which is supposed to support MP3.
SHOUTcast can serve three different types of response:
a native-SHOUTcast “ICY” protocol streaming audio response. It decides to do this if the player accessing the stream includes an icy-metadata: 1 header.
a plain-HTTP streaming audio response, without extra metadata, for media players with no ICY support.
the “SHOUTcast D.N.A.S. Status” page and other pages on the web interface.
How does it decide whether to serve a web page instead of an audio stream? It guesses whether you're using a web browser. By looking to see whether the User-Agent header starts with Mozilla/.... Because all web browsers are Mozilla, right? Jeez, SHOUTcast.
So when Chrome tries to fetch the audio stream to play, SHOUTcast thinks it's a web browser (well... it is) and refuses to give it the audio stream to put in the audio tag. Instead it gets the admin web page.
(I would guess Safari is passing the icy-metadata header to avoid the problem, having specific support for SHOUTcast. I can't test it at the moment as Safari won't play audio or video. Maybe it wants me to install QuickTime for that. Maybe it can go get stuffed.)
So you'll probably need to add a Flash audio player as fallback.
<audio src="http://85.25.108.20:8090/;" controls autoplay></audio>
This should work fine, but make sure /; is there after the stream URL and port. If you don't need autoplay, remove the "autoplay" tag.
Yes. But its only work in Safari
<!DOCTYPE html>
<audio controls src="http://shoutcast.internet-radio.org.uk:10272/"></audio>
Cause Opera and Firefox did not support non free Codecs
see here: Is it possible to play shoutcast internet radio streams with html5?
On redirecting problems with <audio> tag in Browsers try to add "/stream" at the end of the stream URL for preventing redirecting.
example:
not working:
http://live-radio01.xxxxxx.com/2TJW/mp3
working:
http://live-radio01.xxxxxx.com/2TJW/mp3/stream
I use Icecast with Easystream for streaming to both mac and pc. A Script Sets up the audio player called MP3 Sticky Player. swf
With the documentation support files the player just loads as below in both cases.
PC
<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>
As we have removed images from any mp3 metadata we use a image loader that grabs the Icy-MetaData (FYI you will need at least PHP 5.4 to run correctly) and matches a directory of cover art for each players song that streams.
On Chrome 9x If your website works over https Your link for shoutcast stream url must be a https url, for example:
<audio controls src='https://ssl-1.radiohost.pl:7028/stream' type='audio/mpeg' align='cemnter'>
Your browser does not support the audio element.
</audio>
Related
Problem
I'm having videos on a webpage that show the first frame of the video and on hover play the video with a length of around 10 seconds and a resolution of around 720p. I thought of just uploading them to my provider's FTP storage. But then thought that they surely don't use CDNs to deliver content.
So my next thought was using something like Vimeo, Cloudinary, MUX...
I now have seen that I could add videos on a webpage with HLS (m3u8). But I've never done that before so I read my way through these streaming formats.
After that, I'm really unsure what to use in my case as it seems that HLS or DASH is usually more performant than downloading the whole file.
Vimeo for example would give me the option to get a direct link to the .mp4 or HLS.
I'm not seeing a video when using a standard tag. But I found articles that say HLS is now supported in every major browser.
Would you recommend going for such a use case with HLS or Dash and if yes what's the best way to implement it?
What I've tried
<video width="320" height="240" controls>
<source
src="https://player.vimeo.com/external/734323487.mpd?s=234"
// type="application/x-mpegURL"
/>
Your browser does not support the video tag.
</video>
Is it possible to play an Icecast stream using HTML5's AUDIO tag? The syntax I'm using seems happy enough with ShoutCast but not Icecast which I'm confused by. Also if I browse to a certain URL of an Icecast stream a browser window automatically displays the player (see last example).
Working ShoutCast example.
<audio src="http://107.182.233.214:8000/;listen.pls?sid=1" autoplay="true" muted="false" controls="true" volume="1.0"></audio>
Non working Icecast examples.
<audio src="http://91.121.59.45:8016/;stream" autoplay="false" muted="false" controls="true" volume="1.0"></audio>
<audio src="http://91.121.59.45:8016/stream" autoplay="false" muted="false" controls="true" volume="1.0"></audio>
<audio src="http://91.121.59.45:8016" autoplay="false" muted="false" controls="true" volume="1.0"></audio>
Icecast stream URL which opens the player automatically in a browser.
http://91.121.59.45:8016/stream
Is it possible to play an Icecast stream using HTML5's AUDIO tag?
Yes, absolutely.
The only requirement is that the browser supports the codec that you're streaming in.
The syntax I'm using seems happy enough with ShoutCast but not Icecast which I'm confused by.
All these stream URLs with semicolons ; are for SHOUTcast only. SHOUTcast servers run their admin interface on the same URL as streams. They do user agent sniffing to determine whether the client is a web browser or an audio player. When web pages started playing audio many years ago, they needed a way to work around this problem so that browsers could get the audio stream. A stream URL with a semicolon in it forces SHOUTcast to ignore the browser's user agent and replace it with "MPEG OVERRIDE", which causes the rest of the server to return the stream.
Only ; is needed. The whole ;stream thing is just unnecessary stuff that was copied and pasted.
You can read more here: https://stackoverflow.com/a/38217135/362536
As for Icecast streams, all you need is this:
<audio src="http://91.121.59.45:8016/stream" />
(Unless of course you support multiple codecs, in which case you would use multiple sources.)
I have had a look at a couple of players like Flow Player, JW Player and a couple more but I can't get it to work exactly in PHP code.
Is there any way to play FLV within HTML Video Tags?
I know MP4 and OGG files will but the thing that I am working on will produce an FLV file.
You should look at video.js from www.videojs.com I have been using it streaming live video feeds. It mimicks the video tag like this:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="480"
poster="http://video-js.zencoder.com/oceans-clip.png"
data-setup='{"example_option":true}'>
<source src="rtmp://localhost/live/test" type="rtmp/flv">
</video>
Works very well for me.
You might consider using some other players that are able to play FLV files; Known browsers (Chrome, Firefox etc...) are not able to run FLV files untill or unless you use some kind of flash player.
If you are using PHP, you might want to use a flash player! Use Adobe Flash Player, don't be shy! YouTube and many other websites use it.
You can also try to stick to the flayers you have already tried.
You can convert videos to MP4 or format of OGG. So that every browser can play the video file using the HTML5 <video></video> tag.
But Remember: Each browser has its own limitaion for playing a video file; you can read browser support here: Mozilla Developer Network
Play it with Flash. I think it is the only way: http://css-tricks.com/forums/topic/how-to-play-flv-in-html5/
You can do it using flv.js or via MediaElement.js (that will use flv.js underneath), although the support is limited to FLVs that contain H.264 video with AAC/MP3 audio.
Use MediaInfo software or your favorite video player to check what codecs are used in your FLVs.
And if you have H.264 + AAC inside, you can also convert it to MP4 losslessly, without reencoding:
ffmpeg -i input.flv -codec copy output.mp4
Technically speaking the HTML5 video specification is codec/protocol agnostic so one could imagine support for flv files could be possible. Problem is: none of the major web browser has implemented it (probably because flv is a proprietary container from Adobe). You will need a flash component to play it back. Either one of the players you mentioned or if you are looking for a standalone free flash player try strobe from Adobe. You can try it here.
If you can produce .f4v files you may have success in renaming them to mp4 and then try and play them in an HTML5 video tag.
Alright, I have a server that serves a motion-jpeg stream over http. What I would like to be able to do is connect to the server and visualize the stream in a browser, preferibly inside a canvas element. Browser should be Safari Mobile.
Is it possible to take the stream with XMLHttpRequest, take the single JPEG images out and put them within a canvas element? Keep in mind that the stream is live, thus possibly endless.
Sorry to revive an old topic but i was faced with this problem and i didnt want to use an other player just native html5
I found one way to display the video inside html5 with "poster" attribute
<video width="360" height="420" controls poster="/video" autoplay>
<source src="/audio.ogg" type="audio/ogg" />
</video>
Might not be what you expected but it works.
iOs mobile Safari supports MJPEG natively over http. Is there specific reason you need it in Canvas?
see http://bridgecam2.halton.gov.uk/mjpg/video.mjpg?camera=1 on a ipad/iphone
I need to play a mp3 audio file when the user clicks on a image. I only want to audio to play, i.e. there should be no controls, widgets, etc. Nor should the browser launch an external application.
Edit: ok, I might be able to try out flash. recommendations for a lightweight flash player?
Now there's a way to do it. Put this: <audio src="sounds/game-welcome.mp3" style="display:none;" autoplay> (Replace sounds/game-welcome.mp3 with your file)
You could do this:
<embed src="blah.wav" autostart=false loop=false>
... but playing sound without flash is evil and will lead to issues cross browser even if there is some solutions.
You could also use HTML5 and the audio tag:
<audio src="horse.ogg" controls="controls">
Your browser does not support the audio element.
</audio>
... but this won't be supported by all browsers.
EDIT: For a flash player you could use this one or this very simple one... there are tons! Try out examples and see what's best for you.
I'm not sure if you can still benefit from these, but SoundManager 2 and jPlayer are two easy to use audio players. Both are instantiated using JavaScript, call a Flash file behind the scenes, and can be styled using HTML and CSS.
Let me correct this. With HTML5 .ogg file will play in FireFox only. Adding Controls element will display controls, to hide controls simply do not add controls element, but again it will only work in FireFox with .ogg file. FireFox does not support MP3 files in HTML5, only Chrome and Safari so far, may be IE9 will later. Your best bet is Flash. Good luck.
just do this:
controls="false"
it's a boolean value