JavaScript Error updating progress.value
<p>I have the following <code>interval</code> which updates the progress value while a YouTube video is playing. It works fine most of the cases but in some other cases the progress does weird things like going back and forth and I get the following error in the console.</p>

<p><code>NotSupportedError: DOM Exception 9: The implementation did not support the requested type of object or operation.</code></p>

<p>This occurs in all browsers and it mostly happens when I load a new video.</p>

<pre><code>if(player) {
    player.loadVideoById({'videoId': data.yt_id});
}
</code></pre>

<p>Does anyone know why is this happening and how can I fix this?</p>

<pre><code>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);
</code></pre>

<p>The error fires on: <code>progress.value = value;</code></p>

<p><code>progress</code> is a <code>&lt;progress&gt;</code> element.</p>

<p>console.log():</p>

<pre><code>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
</code></pre>