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

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

Seekbar not working in Chrome

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

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

1 个答案: