javascript - 通过 PHP fpassthru() 加载 mp4/webm 的 Chrome HTML5 视频 : can't set 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” header 有关。我已将 header “Accept-Ranges: bytes”添加到 .php 脚本的输出中，并且我已确保 Web 服务器允许字节范围请求，但仍然无法正常工作。

Answer 1

关于要求“Accept-Ranges” header 作为 HTTP Byte Serving 的一部分，您是正确的.我建议阅读类似问题的答案:

Seekbar not working in Chrome

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