通过 PHP fpassthru() 加载 mp4/webm 的 Chrome HTML5 视频：无法设置 currentTime？

Posted 2023-05-07

【中文标题】通过 PHP fpassthru() 加载 mp4/webm 的 Chrome HTML5 视频：无法设置 currentTime？

【英文标题】：Chrome HTML5 video with mp4/webm loaded via PHP fpassthru(): can't set currentTime?

【发布时间】：2014-02-12 15:57:37

【问题描述】：

所以这是我遇到的一个奇怪的问题。我只在 Mac 上测试过 Chrome 和 Safari，在这些浏览器之间，问题只在 Chrome 上表现出来。

我有一个非常基本的 html5 视频元素，它从我的服务器加载视频，用户在屏幕上有几个按钮可以跳转到视频中的特定时间。

当视频文件被引用为直接链接时，例如：

<video id="thevideo"  >
  <source type="video/webm" src="videos/vid102.webm" />
  <source type="video/mp4" src="videos/vid102.mp4" />
  <p>Your browser does not support this video.</p>
</video>

...它工作得很好。

但是，我刚刚进行了设置，因此可以通过 php fpassthru 加载视频，例如：

<video id="thevideo"  >
  <source type="video/webm" src="getvideo.php?t=webm&v=166" />
  <source type="video/mp4" src="getvideo.php?t=mp4&v=166" />
  <p>Your browser does not support this video.</p>
</video>

getvideo.php 看起来像这样：

<?php
$videoID = $_REQUEST["v"];
$videoType = $_REQUEST["t"];
$vidPath = "videos/video$vidFile.$videoType";

$fp = fopen($vidPath, 'rb');
header("Content-Type: video/$videoType");
header("Content-Length: " . filesize($vidPath));
fpassthru($fp);

?>

奇怪的行为是：在两种浏览器上，视频加载和播放都很好。然而，在 Chrome 上，使用 fpassthru PHP 脚本的版本无法设置播放器的“currentTime”属性，从而跳转到视频中的某个位置。如果我打电话给document.getElementById('thevideo').currentTime = 50，它不会跳到 50 秒标记，而是停留在原处。

知道为什么会这样吗？

更新： 我已经看到一些迹象表明这与 Chrome 有关，具体要求在响应中提供“Accept-Ranges”标头。我已将标头“Accept-Ranges: bytes”添加到 .php 脚本的输出中，并确保 Web 服务器允许字节范围请求，但仍然无法正常工作。

【参考方案1】：

您要求将“Accept-Ranges”标头作为HTTP Byte Serving 的一部分是正确的。我建议阅读类似问题的答案：

Seekbar not working in Chrome

添加响应头是不够的。您还必须使用“206 Partial Content”状态代码进行响应，并仅返回请求的字节范围。听起来您仍在返回整个文件。 fpassthru 会一直读回文件到最后，所以看起来你需要找到另一种方式来读取文件。

【讨论】：

啊哈！这很有意义。如果我告诉客户端我可以返回请求的字节范围，如果我实际上没有返回请求的字节范围，不是吗？ :)

顺便说一句，感谢您的提示，我找到了以下内容，看起来可以解决问题：***.com/questions/157318/…

很高兴它成功了。我怀疑用 PHP 提供这样的文件会有点慢。为什么不使用没有 PHP 的 CDN 或专用文件服务机器并在 javascript 中动态计算 URL？

主要是不想暴露实际文件，希望不同的用户使用同一个URL接收不同版本的文件。

有些 CDN 会为您提供过期密钥，您可以使用“Location”标头动态重定向到 CDN 临时 URL。