JavaScript 更新进度值时出错

Question

我有以下interval，可以在播放YouTube视频时更新进度值。在大多数情况下，它工作正常，但在其他一些情况下，进度会做一些奇怪的事情，例如来回走动，我在控制台中收到以下错误。

NotSupportedError: DOM Exception 9: The implementation did not support the requested type of object or operation.

这发生在所有浏览器中，主要发生在我加载新视频时。

if(player) {
    player.loadVideoById({'videoId': data.yt_id});
}

有谁知道为什么会发生这种情况以及如何解决此问题？

var value = 0;
var duration = player.getDuration();
var progress = document.getElementById('progress');
var to = setInterval(function() {
    value = 1 / duration * player.getCurrentTime();
    progress.value = value;
}, 250);

错误触发时间：progress.value = value;

progress是一个<progress>元素。

console.log（）：

value: 0.02622895199857715
youtube.js:104 player.getCurrentTime(): 5.417367
youtube.js:103 value: 0.02746555095910624
youtube.js:104 player.getCurrentTime(): 5.672776
youtube.js:103 value: 0.02870214991963533
youtube.js:104 player.getCurrentTime(): 5.928185
youtube.js:103 value: 0.029826330792843594
youtube.js:104 player.getCurrentTime(): 6.160375

Answer 1

我会将其添加为注释，但它可能会有点长。 可能会帮助您回到这方面的基础知识，并为进度对象使用一些整数值。

进度基础知识

我一直使用这样的进度对象：

<progress id="myProgressBar" value="1" max="100"></progress>

然后，将 progress.value 设置为 0 到 100 之间的整数（或任何 MAX 是什么）...

document.getElementById("myProgressBar").value = 10;
// code ...
document.getElementById("myProgressBar").value = 20;
 // code...
document.getElementById("myProgressBar").value = 30;
// etc ...

优酷接口

根据这个超级有用的帖子：

player.getCurrentTime():Number

返回自视频开始播放以来经过的时间（以秒为单位）。

player.getDuration():Number

返回当前播放的视频的持续时间（以秒为单位）。注意 getDuration（） 将返回 0，直到加载视频的元数据， 这通常发生在视频开始播放后。

您的代码

所以，现在我们知道（因为stackoverflow是这样说的）duration以秒为单位，我们知道（同上）player.getCurrentTime()也产生秒。 鉴于这些事实，我们可以执行以下操作：

var duration = player.getDuration();
var progress = document.getElementById('progress');
if(duration!=undefined) { progress.max = parseInt(duration); }
var to = setInterval(function() {
    //just in case we got "0" last time.
    if(duration==undefined || duration == 0) {
       duration = player.getDuration(); 
       if(duration==undefined || duration==0) { return; }
       progress.max = duration;
    }
    var currentProgress = parseInt(player.getCurrentTime());
    if(currentProgress <= duration) { progress.value = currentProgress; }
}, 1000);

当然，这是完全未经测试的代码... 就像我说的 - 这真的应该是一个评论，但评论是如此......有限;-）。 我会将记录器放在该间隔代码中，以查看我在持续时间和"当前进度"中得到的值作为下一步...... 然后，一旦它工作，我会尝试包装它以避免 youTube API 打嗝。 但是，那只是我。

哦。 我们计算的是秒，而不是 1/4 秒......

哎呀。。。最后一件事。 由于我们正在跟踪秒数，我将间隔更改为每秒触发一次。 如果我的更新间隔不会改变，没有理由触发 4 次。

如果你想跟踪 1/10 秒，我想你可以在解析 Int（） 之前将持续时间和 getCurrentTime 乘以 10。

希望它至少为您指明正确的方向。