我遇到了一个奇怪的问题。我只在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服务器允许字节范围请求,但仍然不起作用。