I am trying to play live streaming videos in html5. I have tried red5 server to subscribe the video and it worked well. but the problem is, It is playing using flash in browser. I want to play the video in html5 video tag without using flash support.
Note: Live streaming format is flv.
Can anyone guide me with the best option to do this?
Thanks in advance.
You can use alternatives for flash player using third party player such as JW player, SublimeVideo, VideoJS, etc.
I would also look into html5_rtsp_player if you are looking for non http based protocol. (https://github.com/Streamedian/html5_rtsp_player)
Since HTML5 video does not support .flv at this time (or probably ever), you should use a post-processor (if recording to flv on Red5) to convert to .mp4 using ffmpeg. This will alleviate the unsupported container issue.
I made a streaming server and a website to show the Video. I have tried with many HTML5 player. But problem is no player working without enable flash on browser. There are a website http://jagobd.com and its playing video even I block flash on this site. How they did it? and How can I get this kind of player open source? could you please give me any solution?
My streaming link is Rtmp
RTMP is a Flash technology, and only plays in Flash or other players that support it. No browser supports RTMP, and it's unlikely that any will in the future.
If you want to use a regular HTML5 player, you need to use a compatible streaming format. Consider DASH. While it doesn't have native support in-browser, it doesn't need it as it can be handled with MediaSource Extensions. Most modern browsers support MSE. Many encoders do as well, and you can use whatever static web hosting or CDN you want.
There are other options for video distribution as well, if you have special streaming requirements.
Is there any way to stream mkv files on webpage using javascript/html or any other technologies? I found many questions about this, but I really want to know the answer - is this possible in any way? Maybe ajax, javascript, php, html? Maybe some external libraries? Anything?
I was wondering how youtube works. Is there possible to upload mkv file? Is so, how that videos are streaming to end user?
I know that browser doesn't support mkv natively, but maybe is some way to forcing html to do that?
Any help will be appreciated.
YouTube most probably works using the DASH protocol format. On the server side, the source audio and source video are separately divided into segments of different bitrate/quality. A manifest keeps an index of all possible segments values and their location. This allows to switch quality during playback in the player.
On the client side, the DASH (should be the same with the other main technology: HLS) manifest is used by the player to locate the segments to load in order to feed the content in two separate SourceBuffer, one for audio and one for video and both are being played synchronously together in the MediaSource. For an example player that handles this, see the Shaka Player developed by Google.
Conclusion, there is no need to use a container like mkv but each channel (video, audio) needs to point to a browser supported codec encoded segments.
You don't need anything special for streaming pre-recorded media files. A normal HTTP/1.1 or HTTP/2 server will work just fine. The browser is generally capable of seeking into the file using range requests.
Matroska (MKV) is a container format, and it actually is widely supported because it's basically the same as WebM. WebM is a subset of Matroska... the key differences being that there are suggested codecs for use. (Matroska itself supports almost anything.)
Your audio and video tracks in the file can use a variety of codecs... the key is to use codecs compatible with browsers. Opus for audio and VP8 for video will take you far.
From there, simply reference your video file in a <video> tag.
I have an existing app that streams live audio from a Flash client over RTMP to a Wowza zerver ... I am able to connect Flash clients to this and get real-time, low latency audio without problem.
I'd like to connect some HTML5 based clients in PC, Android and iOS and not use any Flash on the client side ... the RTMP URI is normally "rtmp://myserver/live/mystream" I've tried connecting video and audio tags from HTML5 pages with no success.
Wowza sells on the basis of being able to stream to any client ... if anyone knows the magic URI to put into an HTML video/audio tag, or some other method to allow me to receive the stream without suing Flash in the browser, I'd be very interested to see them.
Please note: this is live audio from an RTMP source, not files. It is audio, not video.
You will need to use HLS for playback. The URI is in the form
http://<wowzaIP>:1935/<appName>/<streamName>/playlist.m3u8
Moreover, Wowza currently supports HTML5 playback with the video tag for Safari on OSX/iOS devices only. Other browsers/platforms may be possible, but results vary. Alternatively, you can look into using an HTML5 player such as the free Wowza Player, and it should work across platforms.
I'm building a web app that should play back an RTSP/RTP stream from a server http://lscube.org/projects/feng.
Does the HTML5 video/audio tag support the rtsp or rtp? If not, what would the easiest solution be? Perhaps drop down to a VLC plugin or something like that.
Technically 'Yes'
(but not really...)
HTML 5's <video> tag is protocol agnostic—it does not care. You place the protocol in the src attribute as part of the URL. E.g.:
<video src="rtp://myserver.com/path/to/stream">
Your browser does not support the VIDEO tag and/or RTP streams.
</video>
or maybe
<video src="http://myserver.com:1935/path/to/stream/myPlaylist.m3u8">
Your browser does not support the VIDEO tag and/or RTP streams.
</video>
That said, the implementation of the <video> tag is browser specific. Since it is early days for HTML 5, I expect frequently changing support (or lack of support).
From the W3C's HTML5 spec (The video element):
User agents may support any video and audio codecs and container formats
The spirit of the question, I think, was not truly answered. No, you cannot use a video tag to play rtsp streams as of now. The other answer regarding the link to Chromium guy's "never" is a bit misleading as the linked thread / answer is not directly referring to Chrome playing rtsp via the video tag. Read the entire linked thread, especially the comments at the very bottom and links to other threads.
The real answer is this: No, you cannot just put a video tag on an html 5 page and play rtsp. You need to use a Javascript library of some sort (unless you want to get into playing things with flash and silverlight players) to play streaming video. {IMHO} At the rate the html 5 video discussion and implementation is going, the various vendors of proprietary video standards are not interested in helping this move forward so don't count of the promised ease of use of the video tag unless the browser makers take it upon themselves to somehow solve the problem...again, not likely.{/IMHO}
This is an old qustion, but I had to do it myself recently and I achieved something working so (besides response like mine would save me some time):
Basically use ffmpeg to change the container to HLS, most of the IPCams stream h264 and some basic type of PCM, so use something like that:
ffmpeg -v info -i rtsp://ip:port/h264.sdp -c:v copy -c:a copy -bufsize 1835k -pix_fmt yuv420p -flags -global_header -hls_time 10 -hls_list_size 6 -hls_wrap 10 -start_number 1 /var/www/html/test.m3u8
Then use video.js with HLS plugin This will play Live stream nicely There is also a jsfiddle example under second link).
Note: although this is not a native support it doesn't require anything extra on user frontend.
There are three streaming protocols / technology in HTML5:
Live streaming, low latency
- WebRTC
- Websocket
VOD and Live streaming, high latency
- HLS
1. WebRTC
In fact WebRTC is SRTP(secure RTP protocol).
Thus we can say that video tag supports RTP(SRTP) indirectly via WebRTC.
Therefore to get RTP stream on your Chrome, Firefox or another HTML5 browser, you need a WebRTC server which will deliver the SRTP stream to browser.
2. Websocket
It is TCP based, but with lower latency than HLS. Again you need a Websocket server.
3. HLS
Most popular high-latency streaming protocol for VOD(pre-recorded video).
Chrome will never implement support RTSP streaming.
At least, in the words of a Chromium developer here:
we're never going to add support for this
With VLC i'm able to transcode a live RTSP stream (mpeg4) to an HTTP stream in a OGG format (Vorbis/Theora). The quality is poor but the video work in Chrome 9.
I have also tested with a trancoding in WEBM (VP8) but it's don't seem to work (VLC have the option but i don't know if it's really implemented for now..)
The first to have a doc on this should notify us ;)
Chrome not implement support RTSP streaming.
An important project to check it WebRTC.
"WebRTC is a free, open project that provides browsers and mobile applications with Real-Time Communications (RTC) capabilities via simple APIs"
Supported Browsers:
Chrome, Firefox and Opera.
Supported Mobile Platforms:
Android and IOS
http://www.webrtc.org/
Years past, there are some updates about RTSP in H5:
RTSP is not supported in H5, neither PC nor mobile.
Flash is disabled in Chrome, see Adobe
MSE works good except iOS safari, for flv.js to play HTTP-FLV on H5, or hls.js to play HLS on H5.
WebRTC is also a possible way to play streaming in H5, especially in 0.2~1s latency scenarios.
Note: I think it's because RTSP use TCP signaling protocol to exchange SDP, which is not HTTP in H5 so it's really hard to support it, especially there is WebRTC now.
So, if you could transcode RTSP to other protocols, like HTTP-FLV/HLS/WebRTC, then you could use H5 to play the stream. Recommend to use FFmpeg to do the transcode:
ffmpeg -i "rtsp://user:password#ip" -c:v libx264 -f flv rtmp://server/live/stream
Start a RTMP server like SRS to accept the RTMP and transmux to HTTP-FLV, HLS and WebRTC:
./objs/srs -c conf/rtmp2rtc.conf
Then it's OK to play the stream by:
HLS by video or hls.js: http://server:8080/live/stream.m3u8
HTTP-FLV by flv.js: http://server:8080/live/stream.flv
WebRTC by H5 or native SDK: webrtc://server:1985/live/stream
Note that the latency of HLS is about 5~10s, LLHLS is better but not too much. The HTTP-FLV is about 1~3s, very similar to RTMP. And the WebRTC latency is about 0.2s, while if covert RTSP to RTMP to WebRTC the latency is about 0.8s.
My observations regarding the HTML 5 video tag and rtsp(rtp) streams are, that it only works with konqueror(KDE 4.4.1, Phonon-backend set to GStreamer). I got only video (no audio) with a H.264/AAC RTSP(RTP) stream.
The streams from http://media.esof2010.org/ didn't work with konqueror(KDE 4.4.1, Phonon-backend set to GStreamer).
Putting a conclusion as of now.
I am trying to build a way around it meaninglessly since rtsp doesn't work OOB. Without a "manager" handling the streaming to be perfected to the way a video tag works, it's not possible now.
I am currently working on something around android+html (hybrid) solution to manage this in a very wicked way. Since it is supposed to play directly from camera to android with no intermediary servers, we came up with a solution involving canvas tag to bridge the non-webview with the webview.