AI球体动画视频控制器

我正在为人工智能语音到命令系统收集球体动画。

我需要在javascript中创建一个控制器,它将堆叠不同的情绪动画,如果情绪发生变化,允许当前的情绪动画完成,然后切换到新的情绪动画中,这样它看起来就无缝了。

每个动画大约5秒,是一个可循环的元素,直到情绪发生变化。

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_av_met_play_pause

我目前的代码——我如何确保视频已经结束,并且在循环之前只切换视频——并使其看起来无缝预加载?

<!DOCTYPE html> 
<html> 
<body> 

<button onclick="playVid()" type="button">Play Video</button>
<button onclick="pauseVid()" type="button">Pause Video</button><br> 

<video id="myVideo" width="320" height="176">
  <source src="mov_bbb.mp4" type="video/mp4">
  <source src="mov_bbb.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

<button onClick="changeMood(idol)">Idol</button>
<button onClick="changeMood(Seeding)">Seeding</button>
<button onClick="changeMood(DeepSearch)">DeepSearch</button>


<script> 

let animationStackObject = [{
    "state":"idol",
    "path": "orb1/idol.mp4"
  },
  {
    "state":"seeding",
    "path": "orb1/seeding.mp4"
  },{
    "state":"deepsearch",
    "path": "orb1/deepsearch.mp4"
  }
]



getAnimation(state, animationStackObject){
 //-- return animationStackElement of correct state requested
}

changeMood(state){
  //is video still playing

  //at point video has finished break loop and send new video to be played
  
  //setCurrentState("idol");
  //change current video to new video path
  //play loop
}


let videoController = {
  init: function(){
    let vid = document.getElementById("myVideo"); 
    vid.src = getAnimation("idol", animationStackObject)

    setCurrentState("idol");
    playVideo()//loopable
  },
  playVideo() {
    let vid = document.getElementById("myVideo"); 
    vid.play(); 

    //duration of video in 1 loop is 5 seconds - start a timer
  },
  pauseVid() { 
    vid.pause();  
  }
}


</script> 

</body> 
</html>