How can I play Apple HLS live stream using html5 video tag

26
votes
<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?

5
htmlvideolive-streamingwowza
Wowza has inbuild transcoder to convert publishing stream to Manifest.f4m format that plays inside HTML5 video tag using strobe.js API . Link - sourceforge.net/adobe/smp/wiki/JavaScript%20API – Altanai
You can use some hls support modules.<br/> stackoverflow.com/a/48003736/9143855 – user9143855

5 Answers

10
votes

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
8
votes

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.

2
votes

For workarounds using flash, you can use FlasHLS chromeless player.

2
votes

Try FlowPlayer. It provides a full HLS support with the least effort in server side!