Javascript 困惑于如何使用播放/暂停文本符号来控制旋转木马中的每个视频？

我需要一些逻辑方面的帮助，我是web开发新手。我有一个普通的JS和CSS视频滑块。我想在视频中添加自定义控件，如播放、暂停和静音。我目前已经在转盘容器中链接了文本播放、音频和暂停符号的两个跨元素。我想知道是否有一种方法可以让滑块知道用户当前正在观看的视频，并通过顶部的这些固定按钮相应地控制视频。我有一个函数来计算如果我按下左箭头或右箭头，我应该为哪张幻灯片设置动画

JS

CSS

HTML

蓝色→ 研究电影（2015）

▶ 
♩
←








→

const track = document.querySelector('.carousel__track'); //ul tag
const slides = Array.from(track.children); //li tags
const nextBtn = document.querySelector('.carousel__button--right')
const prevBtn = document.querySelector('.carousel__button--left');
const slideWidth = slides[0].getBoundingClientRect().width;
const videoText = document.querySelector(".carousel__slide-text");


const setSlidePosition = (slide, index) => {
   slide.style.left = slideWidth * index + "px";
}
slides.forEach(setSlidePosition);

const moveToSlide = (track, currentSlide, targetSlide) => {
   track.style.transform = "translateX(-" + targetSlide.style.left + ")";
   currentSlide.classList.remove('current-slide');
   targetSlide.classList.add('current-slide');
   if (targetSlide === slides[1]) {
      videoText.innerHTML = "LV Project → Hologram Presentation (2016) ";
   } else if (targetSlide === slides[2]) {
      videoText.innerHTML = "We Create Paths By Walking (2016)";
   } else if (targetSlide === slides[0]) {
      videoText.innerHTML = "BLUE → Research Film (2015)";
   }
}

prevBtn.addEventListener('click', e => {
   const currentSlide = track.querySelector('.current-slide');
   const prevSlide = currentSlide.previousElementSibling;
   moveToSlide(track, currentSlide, prevSlide);
})

nextBtn.addEventListener('click', e => {
   // how much to move one slide?
   const currentSlide = track.querySelector('.current-slide');
   const nextSlide = currentSlide.nextElementSibling;
   moveToSlide(track, currentSlide, nextSlide);
})

const audio = document.querySelector('.carousel__slide-text .audio');
const play = document.querySelector('.carousel__slide-text .play');
const carouselVideos = document.querySelectorAll('.carousel__video');

.carousel {
   position: relative;
   height: 70vh;
   width: 70%;
   margin: 0 auto;
   text-align: left;
}

.carousel__slide-text {
   width: 100%;
   padding-top: 2rem;
   font-family: Helvetica, sans-serif;
   font-size: 1rem;
   text-transform: uppercase;
   font-weight: bold;
   letter-spacing: 0.1rem;
   transition: opacity 1s;

}


.carousel span {
   cursor: pointer;
   position: absolute;
}

.play {
   top:5vh;
   right: 0;
}

.audio {
   right: 2rem;
   top:5vh;
}

.carousel__video {
   width: 100%;
   height: auto;
   object-fit: cover;
}

.carousel__track-container {

   margin-top: 2rem;
   height: 100%;
   position: relative;
   overflow: hidden;
}

.carousel__track {
   padding: 0;
   margin: 0;
   height: 100%;
   list-style: none;
   transition: transform 250ms ease-in;
}

.carousel__slide {
   position: absolute;
   top: 0;
   bottom: 0;
   width: 100%;
}

.carousel__button {
   position: absolute;
   top: 60%;
   background: transparent;
   border: 0;
   font-size: 2rem;
}

.carousel__button--left {
   left: -6vw;
}

.carousel__button--right {
   left: 75vw;
}

           <div class="carousel">
              <p class="carousel__slide-text">BLUE → Research Film (2015)</p>
              <span class="play">▶</span> 
              <span class="audio">♩</span>
              <button class="carousel__button carousel__button--left">←</button>
              <div class="carousel__track-container">
                 <ul class="carousel__track">
                    <li class="carousel__slide current-slide">

                       <video class="carousel__video" src="/Home/projects/B L U E - Research Film (2015).mp4" loop
                          video preload="metadata"></video>
                    </li>
                    <li class="carousel__slide">

                       <video class="carousel__video"
                          src="/Home/projects/LV Project_ Hologram Presentation (2016).mp4" loop video
                          preload="metadata"></video>
                    </li>
                    <li class="carousel__slide">

                       <video class="carousel__video" src="/Home/projects/We create Paths by Walking (2016).mp4"
                          loop video preload="metadata"></video>
                    </li>
                 </ul>
              </div>
              <button class="carousel__button carousel__button--right">→</button>
           </div>