时间戳

首页 > 解决方案 > Chrome/Firefox 不会在 HTML 播放器中播放 HLS 视频/mp2t 视频流

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

问题描述

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

直播流作为 m3u8 列表分布在XtreamUI服务器上，并具有这种格式 example.org/live/username/password/channel_1.m3u8 因此，当用户观看直播电视时，这种 URL 会转到播放器源和 CookPete player + 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 内容）。欢迎所有建议/建议。

标签： javascriptencodingvideo-streaminghtml5-videohls.js

解决方案

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

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

推荐阅读