Почему Сhrome показывает ошибку? JavaScript setAttribute()
Почему в консоли Сhrome отображается ошибка JavaScript:
attribute d: Expected moveto path command ('M' or 'm'), "NaN,1".
<video id="vd" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4"></video>
<div id="prg">
<svg id="ldPrg"><path id="prgB" d=""/></svg>
</div>
Сам JS код. Если все переменные кроме cnv заменить имеющимися вычеслениями и удалить -strt, то всё работает, но отрисавывает не корректно.
vd.onprogress=function(){
for(i=0;i<vd.buffered.length;i++){
cnv=prg.clientWidth/vd.duration;
strt=vd.buffered.start(i)*cnv;
prgB.setAttribute('d',prgB.getAttribute('d')+'M'+strt+',1'+' '+vd.buffered.end(i)*cnv-strt+',1')
}
}
vd.onprogress = function() {
console.log('vd.onprogress');
for (let i = 0; i < vd.buffered.length; i++) {
let cnv = prg.clientWidth / vd.duration;
let strt = vd.buffered.start(i) * cnv;
let value = prgB.getAttribute('d') + 'M' + strt + ',1' + ' ' + vd.buffered.end(i) * cnv - strt + ',1';
console.log(prgB.getAttribute('d'), cnv, strt, value);
prgB.setAttribute('d', value);
}
}
<video id="vd" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4" style="width:240px"></video>
<div id="prg">
<svg id="ldPrg"><path id="prgB" d=""/></svg>
</div>