Javascript 如何利用视频制作异步函数

我在我的项目中发现了这个问题。 我的目标是加载一个视频onLoad，检查，这是工作，然后改变视频3次，当我的计数器点击特定数量。它调用了函数，但视频根本没有改变，它调用了许多相同的错误——“未捕获（承诺中）DomeException:play（）请求被新的加载请求中断。Link” 计数器完成后，清除间隔（i）；调用时，将显示所需的视频

window.onload=ChangeSlide

async function ChangeSlide(){
    var line = document.getElementById("line");
    line.style.height =  50 + "px";
    var counter = 0;


    var i = setInterval(function(){
     console.log(counter);
     //do something
     line.style.height =  (50+(counter)) + "px";
    counter++;
    if(counter >= 50){
        SecondSlide();

    }   

    if(counter >= 110){
        ThirdSlide();

    }

    if(counter >= 170){
        FourthSlide();

    }
     if(counter === 226) {
        clearInterval(i);
    }
    }, 50);
}



async function SecondSlide(){
    var img1 = document.getElementById("dot1");
    var img2 = document.getElementById("dot2");
    var img3 = document.getElementById("dot3");
    var img4 = document.getElementById("dot4");

    var video = document.getElementById("myVideo");

    var nadpis = document.getElementById("nadpis");
    nadpis.innerHTML = "Tikety s vysokou úspěšností!";

    img1.style.height = '40px';
    img1.style.width = '40px';
    img1.style.marginLeft = '50px';
    
    img2.style.height = '60px';
    img2.style.width = '60px';
    img2.style.marginLeft = '40px';

    img3.style.height = '40px';
    img3.style.width = '40px';
    img3.style.marginLeft = '50px';

    img4.style.height = '40px';
    img4.style.width = '40px';
    img4.style.marginLeft = '50px';

    
    video.src = "banner/video-f3.mp4";
    video.play();

    
}

考虑使用事件而不是<代码> SETIFATION>代码>，这样你可以根据实际的视频位置而不是外部时钟触发。另外，setInterval是以毫秒为单位的，所以您的最大计数器将是11.3秒……这就是您想要的吗？