Chrome/Firefox 不会在 HTML 播放器中播放 HLS 视频/mp2t 视频流答案

【问题标题】：Chrome/Firefox won't play HLS video/mp2t video stream in HTML playerChrome/Firefox 不会在 HTML 播放器中播放 HLS 视频/mp2t 视频流
【发布时间】：2020-05-01 11:05:30
【问题描述】：

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

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

问题来了，因为 timeshift XtreamUI 正在使用这种 URL example.org/streaming/timeshift.php?username=XXX&password=XXX&stream=2&start=2020-04-26:19-23&duration=7 如您所见，它的 PHP 脚本将原始字节串流到播放器中。以下是来自 /streaming/timeshift.php 的响应标头

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

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

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

【问题讨论】：

标签： javascript encoding video-streaming html5-video hls.js

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

sudo apt-get install libavcodec58

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

【讨论】：