I haven been trying to figure this out for more than a week now but still not successful. I am able to do a live audio stream in .ogg format using virtual DJ as the client and Icecast as streaming server. .ogg stream plays successfully in Firefox and Chrome but doesn't play in IE. How can i play the same stream in both the formats .ogg and .mp3 so that it is supported in all modern browsers although i can only produce one kind of stream i.e .ogg using my client virtual DJ.
I want my users to listen to my same stream irrespective of the browsers they use.
Please help. I really need to get this going.
VirtualDJ can only broadcast in one format at the time, either as Ogg or MP3.
To get both formats you would have to go through a middle server which trans-code one format into the other and broadcast on a different port:
You may be able to use something like VideoLAN (VLC) to do this which can output as Icecast:
vlc.exe --sout "#transcode{[TRANSCODE_OPTIONS]}:std{[OUTPUT_OPTIONS]}" INPUT
For example converting input to a mp3 stream (ibid.):
vlc --sout "#transcode{acodec=mp3,ab=128,channels=2,samplerate=44100}:std{access=file,mux=raw,dst=OUTPUT}" INPUT
You can also set up trans-coding via the GUI. See more details in the provided link.
When the two streams are setup you can define them as audio sources:
<audio>
<source src="//host:8000/mount1" type="audio/ogg" />
<source src="//host:8001/mount2" type="audio/mpeg" />
<audio>
Related
We are working with a development company to create a program that records videos and then uploads them to a server. Then, on our website, users should be able to view the videos.
Here's the issue. As far as I understand it, .MP4 is the only video file format that can be played in any browser. However, the other development company claims that they will deliver the videos as .MKV video files and then all we have to do on our website is re-wrap the videos or something so they will be playable. I do not understand how that works, and they were being very condescending when I asked for clarification.
The videos have to be able to be played in any browser, and I would rather not have to use any special plugins to convert the videos before playing them.
Please help me understand what they expect me to do.
MP4 and MKV are file formats or wrappers that hold multiple media streams (typically audio and video). The wrapper (MP4 or MKV) tells you very little about the actual audio or video format.
Common combinations are MP4 with AVC video and AAC audio or MKV with VP9 video and Vorbis audio. But you could also do MKV with AVC and AAC.
Rewrapping MKV (AVC/AAC) into MP4 (AVC/AAC) is pretty straight forward and does not require a transcode.
I'd guess that MP4 with AVC video and AAC audio is likely the best cross platform combination at this time.
But delivering video over the internet to a browser with varying available bandwidth - can be tricky and may required multiple different quality levels of the same content.
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 am serving a video via the HTML5 video element. I'm finding conflicting information about the appropriate MIME type for m4v video. Most demos set the type attribute to video/mp4 in the source tag in the markup. Some articles I've read indicate video/m4v for the web server Mimetype, while others indicate video/mp4. Which is correct?
See for example, this article indicating video/m4v mimetype: http://html5center.sourceforge.net/make-your-html5-video-play-on-mobile-devices
And this article indicating video/mp4: http://www.coolestguyplanettech.com/use-html-5-video-on-all-browsers/
The standard media type is video/mp4.
The standard mp4 container format is commonly used for both AAC audio, and H.264 video + AAC audio. These have different media types, audio/mp4 and video/mp4, however often you want different applications for audio and video and on some systems it is only possible to associate a default application with a file extension. Therefore it has become popular in some circles to use the extensions .m4a and .m4v for audio and video(+audio), respectively, in an mp4 container. However this does not affect the media type, which already distinguishes these using the audio or video prefix.
A twist, however, is that Apple started using their own media type, video/x-m4v, for videos from their store, which are in an mp4 container and use a .m4v extension. This is set to open the video in iTunes by default. Sometimes that is necessary because the video uses DRM, AC-3 Dolby Digital audio, or other capabilities that are not commonly supported in an mp4 container, but which are supported by iTunes for files with a .m4v extension. If you rely on such capabilities then you may want to use this media type instead of the standard one.
Media types with no x- are standardized in an RFC and tracked by IANA. No media type with the name video/m4v has been standardized. Non-standard media types have a x- prefix.
I only write HTML5 for special projects, but I've had a problem which I was able to solve quite by accident. In my blocks, I was writing the video code like this:
<source src="Videos/myvideo.mp4" type="video/mp4">
<source src="Videos/myvideo.webm" type="video/webm">
Here was my problem: If I put the mp4 line first, Google Chrome would play the video part, but there would be no sound. If I put the webm line first, Google Chrome would play the video and sound correctly, but Apple Safari would not detect the video at all. Even if I added the codec information in the type= statement, it had no effect.
I was about to cave in and try to use Flash, but I happened on the solution, mostly by accident. In the line for mp4, I replaced the type="video/mp4" with type="video/m4v". It cured the problem completely! Note: I did not change the video file extentions from mp4 to m4v -- I only used m4v in the type= statement.
I couldn't find any documentation to tell me to do this, I just got interested in the difference between .mp4 and .m4v file extentions, and started playing around. I use Linux (Xubuntu) and I had created my videos as both webm and H.264 mp4 files, using Openshot Video Editor. Maybe the inner workings of Openshot caused this to be an issue, but anyway -- that's how I solved this problem. My mp4 videos play perfectly. I hope this helps somebody else -- MinnesotaJon
Answering this 8 years later with actual testing in Brave Version 1.22.70 Chromium: 89.0.4389.105 (Offizieller Build) (64-Bit) and Firefox 86.0.1 (64-Bit) on Linux.
<video controls="" controlslist="" preload="metadata">
<source type="video/m4v" src="https://example.com/v.m4v">
</video>
Does NOT work.
But video/x-m4v and video/mp4 both work with the m4v file I am testing with. I guess it's best to use x-m4v based on the accepted answer.
Actually that totally depends on which video container you are using. Most browsers support the webm and/or mp4 file formats. Serving a combination of these two sourcefiles ensures browsers kan view the file. There's also the .ogg format if you wish to include it.
Not so sure about the m4v format, but it sounds like it's not one commonly used on the web. Anyway, I'd say serve m4v with a video/m4v MimeType and mp4 as a video/mp4 MimeType.
How can I read a Red5 (RTMFP) stream using HTML5?
Red5 supports different kinds of streaming*, so I don't know which kind of streaming you mean:
Streaming Video (FLV, F4V, MP4)
Streaming Audio (MP3, F4A, M4A)
Recording Client Streams (FLV only)
*source: Red5 on Google Code.
You probably want to use the HTML5 Video Tag and/or the HTML5 Audio Tag to 'play' the stream. Therefor you will need to do some conversion.
Audio streaming
New technique, lot's of browsers and no universal codec support yet.
See browsers + codec's it supports*:
FireFox 3.6+
Ogg Vorbis
Wav
Safari 5+
MP3
WAV
Chrome 6
Ogg Vorbis
MP3
Opera 10.5+
Ogg Vorbis
WAV
Internet Explorer 9 (beta)
MP3
WAV
*source: Native Audio in the browser.
Video streaming
Currently there's a discussion going on about the HTML5 Video Codec, between Ogg Theora and H.264. So make a conversion to one of those formats. I would recommend H.264 because it looks like Red5 will implement H.264 support in the future.
As with audio as with video.. New technique, lot's of browsers and no universal codec support yet. See for list: HTML5 Video on Wikipedia.
After conversion
The easiest way to check for support of the video and audio tags is to dynamically create one or both with scripting and check for the existence of a function:
var hasVideo = !!(document.createElement('video').canPlayType);
This simple code line will dynamically create a video element and check for the existence of the canPlayType() function. By using the !! operator, the result is converted to a Boolean value, which indicates whether or not a video object could be created.
Alternatively
You can serve 2 streams with a Flash Fallback:
<video src="video.ogg">
<object data="videoplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="video.swf"/>
</object>
</video>
The video tag is used by default, if not supported the browser will use the flashplayer.
Edit:
I now see that Red5 supports H.264 (Live Stream Publishing). Read here how to use the HTML5 video tag with the H.264 codec
You also might wanna have a look at: Adobe's Video Player Widget.
A short answer: you can't. The browsers will not support streams over RTMP (RTMFP), RTP or UDP. Your stream must be sent over HTTP to be accessible (in fact you have to emulate a static file on the server).
Also WebM deserves a few words. In May 2010 Google announced a royalty-free codec for HTML5 viceo purposes. As of now, the latest versions of alternative browsers (Mozilla, Opera, Chrome) has the ability to play it. Only the big ones who have invested good bucks to H.264 resist.
Now days a couple of media servers support WebM. I guess the first was Flumotion to implement it. I also have my own GPL software for live-streaming WebM called stream.m. It is a very early release but if you want to give it a try I'm not stopping anyone. :)
RTMFP and HTML5(WebRTC or Websocket) protocols are supported in WCS4
So you can publish RTMFP stream to the server and play this stream using Chrome(WebRTC), Firefox(WebRTC) or iOS Safari browser(Websocket).
Red5 does not support RTMFP.
RTMFP is a peer-to-peer designed protocol, however server can be used like RTMFP peer, therefore it would be simple client-server connection Flash-Server like RTMP.
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>