Question

我想在HTML5中设置视频的时间位置。时间应该设置如下：

<?php
$Id     = isset($_REQUEST['Id']) ? $_REQUEST['Id'] : '';
if ($Id)
{
/* Mysqli query to retrieve and store in $SubArray where $Id
   Example:  
   If $Id=1 
   $SubArray = array(1=>'Focus',2=>'Explorer');
   If $Id=2
   $SubArray = array(1=>'Cavalier',2=>'Impala', 3=>'Malibu');
*/
?>
    <select id="drop_second" name="drop_second">
    <option value="0">[Select]</option>
    <?php
    foreach ($SubArray as $k=>$v)
    {
    echo '<option value="'.$k.'">'.$v.'</option>';  
    }
    ?>
    </select>
<?php
}
?>

视频嵌入如下：

function settime(){
    var video = document.getElementById("video");
    console.log(video.currentTime); //----->output for example 15.3
    video.currentTime = 10.0;
    console.log(video.currentTime);//----->>output always 0
}

但出于某种原因，这总是只会将Chrome中的currentTime重置为0。

设置currentTime时为什么要重置时间？我怎样才能正确设置currentTime？

Answer 1

这在很多情况下是由于服务器没有回复 Accept-Ranges 标头造成的。出于一个晦涩的、仅与 Google 开发人员相关的原因（FF 人员似乎并没有因为没有 Accept-Ranges 标头的服务器回复而受到冒犯），当没有提供这样的标头时，他们拒绝实现搜索.通过使用 nginx 代理并添加 proxy_force_ranges on;（服务器或位置都有效），您可以非常轻松地添加一个（至少用于测试）。

Answer 2

似乎您正在使用video.js。如果是这样，请通过VideoJsPlayer.currentTime()方法获取并设置currentTime。

例如：

const player = videojs(document.getElementById("video1"));

// read currentTime
console.log(player.currentTime());

//set currentTime
player.currentTime(10.0);

// read currentTime
console.log(player.currentTime());

Answer 3

这是Chrome中的bug，显然只有“某些”视频会发生这种情况。类似的错误报告过去已提交并关闭过很多次，因此，我建议我们密切注意，直到真正解决问题后，它才会再次关闭。

Answer 4

就我而言，我必须更新视频服务服务器以返回带有Status Code 206和Content-Range和Content-Length标头的响应

Answer 5

我遇到了同样的问题。这就是底线。

如果您是在集成开发环境中编写代码，则直接从IDE服务器以外的硬盘上打开HTML文件-这发生在我身上，该服务器不允许您在视频播放期间设置任意时间。
您可以检查浏览器是否可以执行此操作警报（“开始：” + player.seekable.start（0）+“结束：” + player.seekable.end（0））； player.seekable返回一个TimeRanges对象：定义和用法 seekable属性返回一个TimeRanges对象。 TimeRanges对象表示可用于寻找用户的音频/视频范围。可搜索范围是用户可以搜索（移动播放位置）的音频/视频时间范围。对于非流式视频，通常甚至可以在视频被缓冲之前在视频中的任何位置进行搜索。注意：此属性是只读的。 www.w3schools.com article

Answer 6

我的解决方案是首先从我的服务器发送以下标头：

Accept-Ranges: none,
Content-Length: 123456,
Content-Type: audio/mpeg

然后使用 MediaSource 对象：

const mediaSource = new MediaSource();
audio.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen, { once: true });

function sourceOpen() {
    URL.revokeObjectURL(audio.src);
    const sourceBuffer = mediaSource.addSourceBuffer('audio/mpeg');

    fetch('https://example.com/audio.mp3')
    .then(response => response.arrayBuffer())
    .then(data => {
        sourceBuffer.appendBuffer(data);
    })
    .catch(error => {
        console.log(error);
    });
}

这将强制浏览器下载整个文件，这取决于您的用例。

Answer 7

它可能已经得到解决，但这是一个 Chrome 的“错误”，他们可以像 FF 一样修复，但我猜是 #wontfix。这是一个服务器端修复程序，因此您需要确保正确传递标头。

这很浪费，但是通过将 Accept-Ranges 设置为 bytes（确保还包括内容长度和 mime 类型），每次从字节 0 缩放时，它都会尝试重新下载文件一直到你着陆的地方——所以它可以让你跳来跳去，但代价很大。

    header('Accept-Ranges: bytes');

我建议您通读这个问题的答案，并尝试正确设置范围，以免浪费太多带宽：

Resumable downloads when using PHP to send the file?

另外，更多参考：

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers#range_requests

Answer 8

您可以添加 preload="auto"，浏览器会尽快尝试下载文件。

https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics

为我工作。

Answer 9

我终于找到答案了！ Chrome要求您将currentTime设置为String而不是数字。

function settime() {
    var video = document.getElementById("video1");
    console.log(video.currentTime); // output 0
    video.currentTime = 10.0;
    console.log(video.currentTime); // output 0 for some chrome users or 10 for firefox and others
    video.currentTime = "10.0";
    console.log(video.currentTime); // output 10
}

settime();

<audio id="video1" src="https://sample-videos.com/audio/mp3/crowd-cheering.mp3" controls></audio>
<div>Click play to start the audio at 10 s.</div>

Answer 10

应该是

var video = document.getElementById("video1");

你有

<video id="video1" class="video-js vjs-default-skin" muted>

为什么在Chrome中设置HTML5视频元素的currentTime重置时间？

10 个答案: