5

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

jhumbug
  • 73
  • 1
  • 2
  • 5

2 Answers2

11

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.

misterben
  • 7,455
  • 2
  • 26
  • 47
  • Yep, that was it. There were some additional problems with the compiling, but I got those figured out as well. Thanks. – jhumbug Jan 15 '16 at 19:44
  • Also, if the headers from server come different than the file extension, then the browser may have problems in rendering it. For example, if you want to render a file from http://.../some_name.mp4 and the "Content-Type" header comes "video/mpeg" and not "video/mp4", then the video may be considered corrupted. (happened to me on IE11) – Victor Feb 08 '19 at 13:41
0

Please refer to this link for the solution. https://codesandbox.io/s/v61w1?file=/src/components/Video.js

Also, if the video doesn't play, add the following options:

** videoNode is the reference to the player.

 const videoJsOptions = {
  muted: false,
  autoplay: true,
  controls: false,
  width: SCREEN_WIDTH,
  height: SCREEN_HEIGHT,
  sources: [{ src: source, type: 'application/x-mpegURL' }],
  playbackRates: [0.5, 1, 1.25, 1.5, 2],
  html5: {
    hls: {
      enableLowInitialPlaylist: true,
      smoothQualityChange: true,
      overrideNative: true,
    },
  },
};

player = videojs(videoNode, videoJsOptions, function onPlayerReady() {
  console.log('onPlayerReady', this);
});
Jasjyot Singh
  • 9
  • 2