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

Question

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

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

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

<video id="thevideo" width="720" height="480">
  <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" width="720" height="480">
  <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 服务器允许字节范围请求，但仍然无法正常工作。

Answer 1

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

Seekbar not working in Chrome

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