28
<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?

Kara
  • 6,115
  • 16
  • 50
  • 57
jM2.me
  • 3,839
  • 12
  • 44
  • 58
  • Wowza has inbuild transcoder to convert publishing stream to Manifest.f4m format that plays inside HTML5 video tag using strobe.js API . Link - https://sourceforge.net/adobe/smp/wiki/JavaScript%20API/ – Altanai Jun 25 '15 at 10:09
  • You can use some hls support modules.
    https://stackoverflow.com/a/48003736/9143855     –  Dec 28 '17 at 07:59

5 Answers5

12

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
robert
  • 144
  • 2
  • 3
  • Thank you. I was streaming H.264 via MP3 instead of AAC. – jM2.me Dec 08 '13 at 18:48
  • I tried example streams from https://developer.apple.com/streaming/examples/ but none of them are playing even though all are formats are H.264 + AAC. Any idea whats the issue? – MA1 Nov 22 '16 at 11:16
9

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.

MrP
  • 1,291
  • 1
  • 9
  • 18
5

On Browsers supporting Media Source Extension you can use https://github.com/dailymotion/hls.js

mangui
  • 139
  • 2
  • 5
2

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

flavioribeiro
  • 160
  • 1
  • 8
2

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

XlbrlX
  • 743
  • 1
  • 6
  • 10