What support for live streaming does the HTML5 video element have

html5-videortpvideovideo streaming

Does the HTML5 video element support non-HTTP-based (HLS, SmoothStreaming, etc.) live-streaming protocols?

Does it support RTP/RTSP streaming protocols? Does it support RTMP? Are there specific browsers that support or don't support it?

Best Answer

HTML5 tag has very limited support on video sources. The video sources supported are also limited to what browser your visitors use. Please see:

http://www.w3schools.com/html/html5_video.asp

for a table of supported formats depending on browser. To sum it up, HTML5 Video supports MP4 on all browsers and OGG, WEBM in FireFox, Opera and Chrome. With that said, it is Technically Possible to stream RTSP/RTP, but highly unrecommended.

If you must use HTML5 Video and have more control over the streaming server, you could try This Solution, which explains how to stream a video through an ogg file with VLC. Then that ogg file link can be used to stream the video on a page with HTML5 Video Tag.

Alternatives to HTML5 Video tag

Flash Video Players support quite a bit more then HTML5 Video. For example JW Player supports:

3 video file types: MP4, WebM and FLV.
3 audio file types: AAC, MP3 and Vorbis.
2 streaming protocols: HLS and RTMP.

And for even more advanced video and audio source support you could try VLC Web Plugin, or the new WebChimera (based on libvlc). (both of these require a plugin installed, flash requires a plugin too, but that is usually already installed)

UPDATE

As NPAPI plugins have been deprecated in most browsers, using VLC Web Plugin and WebChimera NPAPI is no longer a solution.

Another interesting thing to note on this topic is Dailymotion's HLS.js that gives the possibility of live streaming to all browsers through HLS.

Related Solutions

Android – HTML5

I've just done some experimentation with this, and from what I can tell you need three things:

You must not use the type attribute when calling the video.
You must manually call video.play()
The video must be encoded to some quite strict parameters; using the iPhone setting on Handbrake with the 'Web Optimized' button checked usually does the trick.

Have a look at the demo on this page: http://broken-links.com/tests/video/

This works, AFAIK, in all video-enabled desktop browsers, iPhone and Android.

Here's the markup:

<video id="video" autobuffer height="240" width="360">
<source src="BigBuck.m4v">
<source src="BigBuck.webm" type="video/webm">
<source src="BigBuck.theora.ogv" type="video/ogg">
</video>

And I have this in the JS:

var video = document.getElementById('video');
video.addEventListener('click',function(){
  video.play();
},false);

I tested this on a Samsung Galaxy S and it works fine.

Html – Streaming via RTSP or RTP in HTML5

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

Best Answer

Related Solutions

Android – HTML5 element on Android

Html – Streaming via RTSP or RTP in HTML5

Technically 'Yes'

Related Topic

Android – HTML5