Video.js / Contrib-HLS not playing HLS in most browsers (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED)

Question

I have a video player I'm building that needs to play HLS live and on-demand streams.

It seems to be working fine in only Safari. (minus the custom styling which I need to update, ignore that) In all other browsers I get this error:

VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) The media could not be loaded, either because the server or network failed or because the format is not supported.

What am I missing? Seems pretty similar to the contrib-hls demo page implementation, which plays fine in all browsers.

Here's the repo: https://github.com/adult-swim/adult-swim-video-player and the branch to look at is feature-latest-versions

For testing I'm actually using a downloaded video from the videojs-contrib-hls demo page here: http://videojs.github.io/videojs-contrib-hls/

Here is where I'm where I'm initializing VideoJS: https://github.com/adult-swim/adult-swim-video-player/blob/feature-latest-versions/app/scripts/views/adult-swim-video-player.js#L56

Here's two compiled versions of the code:
http://www.adultswim.com/dev/as-player/ - on demand
http://www.adultswim.com/dev/as-player-live/ - live

I'm using these versions:
video.js : 5.5.2
videojs-contrib-hls : 1.3.4
videos-contrib-media-sources : 2.4.4

Answer 1

You have an incorrect mime type: <source src="video/test.m3u8" type="video/mp4">.

The result is the player will try to play the video in the html5 tech (an html5 video element) since that can play MP4. On Safari the video will play as the video element also supports HLS, but on browsers without native HLS support it will break.

Use the correct mime type application/x-mpegURL so that videojs-contrib-hls can kick in on other browsers.