更新progress.value时发生JavaScript错误

我有以下

interval

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

NotSupportedError:DOM异常9:实现不支持请求的对象或操作类型。

这在所有浏览器中都会发生，而且大多数情况下都是在我加载新视频时发生的

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
是一个
元素

console.log（）：

我想加上这个作为评论，但可能会有点长。可能会帮助您回到这一点上的基本知识，并为progress对象使用一些整数值

进步基础

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

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

YouTube API

根据：

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

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

您的代码

所以，现在我们知道（因为stackoverflow这么说）持续时间是秒，我们知道（同上）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);

var duration=player.getDuration（）；
var progress=document.getElementById（'progress'）；
if（duration！=未定义）{progress.max=parseInt（duration）；}
var to=setInterval（函数（）{
//以防我们上次得到“0”。
如果（持续时间=未定义| |持续时间=0）{
duration=player.getDuration（）；
if（duration==undefined | | duration==0）{return；}
progress.max=持续时间；
}
var currentProgress=parseInt（player.getCurrentTime（））；
if（currentProgress）触发错误的行是什么？错误会在以下行触发：
progress.value=value；
@patrickevans什么是progress？
元素？是的，它是一个
元素。您可以控制台.log out“1/duration*player.getCurrentTime（）”吗所以我们可以看到这个值是什么？想知道progress是否需要一个介于0和progress.MaximumYeah之间的int。这可能是我的复制/粘贴白痴。你能放弃：数字愚蠢吗（根据更新的代码）在我复制的3个地方？再试一次。是的，但我仍然需要逐行查看此解决方案，以便更好地理解它。@BRI为什么即使我设置为50毫秒，进度更新也会如此缓慢。@因为您使用秒作为进度计（请参阅最后一部分关于将持续时间和间隔乘以10的内容。。。
document.getElementById("myProgressBar").value = 10;
// code ...
document.getElementById("myProgressBar").value = 20;
 // code...
document.getElementById("myProgressBar").value = 30;
// etc ...

player.getCurrentTime():Number

player.getDuration():Number

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);