How to play HLS Wowza Live Stream (m3u8) on videojs

Question

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?

Solution 1

Right now the current videojs only supports m3u8/HLS on safari and iOS. Android is supposed to support HLS, or cupertino streaming, but I have heard it is buggy. To make HLS and m3u8 work in videojs you need to provide an HLS capable flash fall back for videojs.

Check out this example http://flashls.org/videojs/flash_demo.html

To implement it yourself... follow this guide or download this swf then add this code to your videojs page.

<script>
  videojs.options.flash.swf = "[YourHosted]/video-js.swf"
</script>

...

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="360" data-setup='{"techOrder": ["flash"]}'>
  <source src="http://[Wowza Ip]/live/mp4:mystream/playlist.m3u8" type='video/mp4'/>
</video>

Solution 2

Need add an additional library for support HLS (LiveStream).

VideoJS HLS Library. For live example Live Example.