On my website I used embedded vlc to play some audio files but now this not supported by firefox or chrome. I can not use html5 because of some codecs. The files were generated with Android AMR codecs.
What should I use?
I would probably have to convert but I couldn't configure sox with AMR
Related
How to play .avi and .mov video formats in html ?
We are developing the website, where the videos can be uploaded, using html5, videos uploaded are of .ogg, .mp4, .webm. We have native android and ios applicaitons, where the videos can be uploaded of .mov and .avi formats.
Our application should be able to play the videos of .mov and .avi formats.
Request you to please let us know on how to display .mov, .avi formats without any conversion in server side.
.avi files can contain video encoded using any codec but in practice they contain video encoded using the old xvid/divx codecs.
HTML5 supports the x264 and vp8/vp9 codecs.
Flash supports the x264 and the old sorenson codecs.
xvid/divx cannot easily be converted to any of these codecs withouth transocing the hole stream. So there is not quick and easy client-side solution.
As a server side solution for converting .avi to .mp4, avconv and ffmpeg are very popular, widely sued and free. And of course there is a multitude of commercial solutions, too.
<video id="live" autoplay controls>
<source src="http://[WOWZA-IP]:1935/Live/mp4:[LIVESTREAMNAME]/playlist.m3u8" type="video/mp4" />
</video>
I am trying to play h264 encoded live stream using html5 video tag. Live stream is broadcasted by wowza media server and when visiting src link I get a valid playlist file. When trying to play the stream on android chrome browser, player does nothing and shows black screen.
Is this html5 video tag related issue or maybe broadcaster?
These are the formats you can play using html5 source tags.
Think of a video format as a zip file which contains the encoded video stream and audio stream. The three formats you should care about for the web are (webm, mp4 and ogv):
.mp4 = H.264 + AAC
.ogg/.ogv = Theora + Vorbis
.webm = VP8 + Vorbis
There is actually a good range of solutions for this. One solution would be to detect if HLS can be played:
document.createElement('video').canPlayType('application/vnd.apple.mpegURL') !== ''
However, this would not allow you to play HLS content on devices which do not support playback. At this moment, playback is only supported on Microsoft Edge, iOS Safari, OS X Safari and Android (however, I strongly advise against using HLS on Android due to limitations)
An other solution to play HLS across all platforms in HTML5 is to use an HTML5 HLS player such as THEOplayer. They managed to allow HLS to be played on all popular platforms and devices, including those without Media Source Extension support. Currently, the list of supported browsers and platforms includes: Internet Explorer, Edge, Firefox, Chrome, Opera and Safari on Windows, Linux, Mac OS X, Android, iOS and Windows Phone.
On Browsers supporting Media Source Extension you can use https://github.com/dailymotion/hls.js
For workarounds using flash, you can use FlasHLS chromeless player.
Try FlowPlayer. It provides a full HLS support with the least effort in server side!
As i said in the question, i am looking for a html5 player which supports:
Avi
mp4
xvid
flv
Any suggestions?
You aren't going to find a HTML5 player which supports the formats you listed. You can find a chart here showing which browsers support which codec. AVI and XVID aren't supported by any browser, you can however get around playing flv by using a flash player.
So I accidentally opened an mkv video file with Chrome, and to my surprise it played it using the native player:
<video src="video.mkv"></video>
It was playing perfectly. HTML5 video supports matroska container?
HTML5 doesn't support any video formats, or rather HTML5 doesn't specify what formats browsers should support. It's up to the browsers to decide which formats they choose to support. Apparently Chrome plays .mkv, but I wouldn't be surprised if other browsers didn't play the same file.
The website has probably set the mimetype of the file to video/webm. Chrome will open this inline rather than forcing a download (because otherwise it doesnt know what to do with it or how to open it).
E.g., in apache this is done by using the AddType directive (can be done in a htaccess):
AddType video/webm .mkv
I'd be surprised if browsers didn't support mkv, as the webm container is just a restricted version of the matroska format. Beyond that you'd have to check the codec of the video inside, and ensure your browser can handle that. If the video format is VP8 or VP9 and the audio is Opus or Vorbis it's webm compliant and might as well be renamed as such. Note that H.264, H.265 and MP3 are not webm compliant and you should avoid using that extension on files that include those formats, the video would still play but it would technically break the webm specification and is frowned upon.
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.