Chrome/Firefox 无法在 HTML 播放器中播放 HLS 视频/mp2t 视频 stream

Question

我目前正在开发 web 应用程序，其主要目的是流式传输/时移电视频道。 应用程序是用 Javascript React 框架编写的，对于 web 播放器，我们使用带有集成 hls.js 的CookPete ReactPlayer。 我们已成功播放直播电视频道，但不幸的是，我们在时移频道方面遇到了一些问题

直播流作为 m3u8 列表分布在XtreamUI服务器上，并具有这种格式 example.org/live/username/password/channel_1.m3u8 所以当用户观看直播电视时，这种 URL 会转到播放器源和 CookPete player + hls.js 通过解析/处理 m3u8 列表来发挥他们的魔力，从而完美地播放视频。

Here comes the problem, for timeshift XtreamUI are using this kind of URL example.org/streaming/timeshift.php?username=XXX&password=XXX&stream=2&start=2020-04-26:19-23&duration=7 As you can see its PHP script将原始字节流到播放器中。 以下是来自 /streaming/timeshift.php 的响应标头

如您所见，Content-type 是 video/mp2t，由于某种原因无法在浏览器环境中播放。（Google Chrome、Mozilla Firefox、IE 11）。 弹出此警告。

另一方面，Safari浏览器在Mac视频播放完全正常，但来自Safari的请求有点不同。 这是 Safari 控制台网络选项卡的屏幕截图。 如您所见，有几个具有不同字节范围的请求。

我们正在寻求一种解决方案，该解决方案将在 Google Chrome、Mozilla Firefox 和 IE 11 中提供播放时移视频（视频/mp2t 内容）。欢迎所有建议/建议。

Answer 1

Content-type 是 video/mp2t，由于某种原因无法在浏览器环境中播放

这是因为 chrome 和 Firefox 不支持 mpeg 传输流，而 safari 支持。 hls.js 之所以有效，是因为它知道如何读取二进制 ts 文件，并将其重写为 mp4 片段，然后再发送到媒体源扩展缓冲区。 你也需要这样做。 看看 mux.js。

Answer 2

在 Firefox 中，通过运行此命令安装编解码器。

sudo apt-get install libavcodec58

在 chrome 中也安装一个类似的编解码器。 它应该可以解决问题。