Video.js / Contrib-HLS不能在大多数浏览器中播放HLS (代码:4 MEDIA_ERR_SRC_NOT_SUPPORTED)

Question

我有一个视频播放器，我正在建设，需要播放他的生活和点播流。

它似乎只在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/ -现场直播

我使用以下版本：

video.js : 5.5.2

videojs-contrib-hls : 1.3.4

视频-contrib-media-source: 2.4.4

Answer 1

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

结果是播放器将尝试播放html5技术( html5视频元素)中的视频，因为它可以播放MP4。在Safari上，视频将会播放，因为video元素也支持HLS，但在没有原生HLS支持的浏览器上，它将会中断。

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