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 ...

YouTube API

根据this super helpful post :

player.getCurrentTime():Number

Returns the elapsed time in seconds since the video started playing.

player.getDuration():Number

Returns the duration in seconds of the currently playing video. Note that getDuration() will return 0 until the video's metadata is loaded, which normally happens just after the video starts playing.

您的代码

所以，现在我们知道(因为 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);

当然，这是完全未经测试的代码...就像我说的 - 它确实应该是一条注释，但注释是如此...有限;-)。我将记录器放入该间隔代码中，以查看我在持续时间和“currentProgress”中获得的值作为下一步...然后，一旦它开始工作，我会将其包装在尝试中，以避免出现问题youtube API。但是，那只是我。

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

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

如果您想跟踪 1/10 秒，我想您可以在 parseInt() 之前将持续时间和 getCurrentTime 乘以 10。

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