滑块中的视频无法在Safari中显示，无法在Chrome和Firefox中使用

如何解决滑块中的视频无法在Safari中显示，无法在Chrome和Firefox中使用

我使用HTML，CSS和香草JS制作了基本的视频滑块。它在chrome和firefox中完美运行，但在野生动物园中显示为空白。我检查了文档，页面上显示了所有视频元素。我在-moz-和-webkit-的CSS过渡中添加了前缀，但仍然一无所获。不确定发生了什么。

HTML

<section class="projects-container">
      <nav>
         <div class="proj__nav">
            <a href="#archiveFilms" class="archiveFilms active-proj">Archive Films</a>
            <a href="#soundDY" class="dearYou">Sound: Dear You</a>
            <a href="#soundDS" class="directorSt">Sound: Final Director's Statement </a>
         </div>
         <a href="/index.html" class="proj__back">Back</a>
      </nav>

  <main>
     <div id="archiveFilms">
        <div class="carousel">
           <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" id="blue" src="/img/Projects/B L U E - Research Film (2015).mp4"
                       video preload="metadata"></video>
                 </li>
                 <li class="carousel__slide">

                    <video id="lvproj" class="carousel__video"
                       src="/img/Projects/LV Project_ Hologram Presentation (2016).mp4" video
                       preload="metadata"></video>
                 </li>
                 <li class="carousel__slide">

                    <video id="walking" class="carousel__video"
                       src="/img/Projects/We create Paths by Walking (2016).mp4" video preload="metadata"></video>
                 </li>
              </ul>
           </div>
           <button class="carousel__button carousel__button--right">→</button>
           <div class="vid-nav">
              <p class="carousel__slide-text">BLUE → Research Film (2015)</p>
              <span class="play">▶</span>
              <span class="audio">♩</span>
           </div>
        </div>
     </div>
</main>

CSS

main {
   width: 100vw;
   height: 100vh;
   display: flex;
   scroll-behavior: smooth;

}

#archiveFilms {
   background-color: var(--grCol3);
   min-width: 100vw;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;

}


.vid-nav {
   position: relative;
   height: 5vh;
   width: 100%;
   display: flex;
   margin: 0 auto;
   padding-top: 2rem;
}

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

}


.vid-nav span {
   cursor: pointer;
   font-size: 1.1rem;
}

.play {
   padding-right: 1rem;
}

.blinking {
   animation: blinkingAudio 1.2s infinite;
}

@keyframes blinkingAudio {
   0% {
      color: #000;
   }

   49% {
      color: #000;
   }

   60% {
      color: transparent;
   }

   99% {
      color: transparent;
   }

   100% {
      color: #000;
   }
}

.carousel {
   position: relative;
   height: 75vh;
   width: 75%;
   margin: 0 auto;

}

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

.carousel__track-container {

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

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

}

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

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

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

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

JS

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 carouselVideos = document.querySelectorAll('.carousel__video');

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)";

   }
}

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

})
}

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