视频.js / Contrib-HLS在大多数浏览器中无法播放HLS(代码:4 MEDIA_ERR_SRC_NOT_SU

Question

我正在构建一个视频播放器，需要播放HLS直播和点播流。

它似乎仅在Safari中工作正常。 （减去我需要更新的自定义样式，忽略它）在所有其他浏览器中，我收到此错误：

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.

我错过了什么？ 似乎与 contrib-hls 演示页面实现非常相似，它在所有浏览器中都能正常运行。

下面是存储库：https://github.com/adult-swim/adult-swim-video-player，要查看的分支是feature-latest-versions

为了进行测试，我实际上使用了从videojs-contrib-hls演示页面下载的视频：http://videojs.github.io/videojs-contrib-hls/

这是我初始化VideoJS的地方：https://github.com/adult-swim/adult-swim-video-player/blob/feature-latest-versions/app/scripts/views/adult-swim-video-player.js#L56

下面是代码的两个编译版本：
http://www.adultswim.com/dev/as-player/- 按需
http://www.adultswim.com/dev/as-player-live/- 直播

我正在使用这些版本：
视频.js ： 5.5.2
videojs-contrib-hls ： 1.3.4
视频-贡献-媒体-来源 ： 2.4.4

Answer 1

您的 MIME 类型不正确：<source src="video/test.m3u8" type="video/mp4"> 。

结果是播放器将尝试在html5技术（html5视频元素）中播放视频，因为它可以播放MP4。在 Safari 上，视频将播放，因为视频元素也支持 HLS，但在不支持本机 HLS 的浏览器上，它会中断。

使用正确的 mime 类型 application/x-mpegURL，以便 videojs-contrib-hls 可以在其他浏览器上启动。

Answer 2

有关解决方案，请参阅此链接。https://codesandbox.io/s/v61w1?file=/src/components/Video.js

此外，如果视频无法播放，请添加以下选项：

** videoNode是对播放器的引用。

 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);
});