Bootstrap 4 Html5视频标签在bootstrap 4转盘中无法正常工作

我正在尝试在我的网页中添加一个引导4视频旋转木马。旋转木马有4个幻灯片。每张幻灯片都有不同的视频。在第一页加载时，每个幻灯片的视频都正常工作。但问题是，当旋转木马的第一次迭代完成后，它再次出现在第一张幻灯片上，视频的“自动播放”就不起作用了

<div id="video-carousel-example2" class="carousel slide carousel-fade" data-ride="carousel" data-interval="3500">

<div class="carousel-inner" role="listbox" role="option">
    
    <div class="carousel-item active">
        
        <div class="view">
            
            <video id="vid" class="video-fluid" autoplay="autoplay" muted="" style="width: 100%;height: 100vh!important;object-fit:fill;">
                <source src="assets/Mp4/Bilgates1.mp4" type="video/mp4" />
            </video>
            <div class="mask rgba-indigo-light"></div>
        </div>
    </div>
    
    <div class="carousel-item">
     
        <div class="view">
           
            <video id="vid" class="video-fluid" autoplay="" muted="" style="width: 100%;height: 100vh!important;object-fit:fill;">
                <source src="assets/Mp4/Elon musk 2.mp4" type="video/mp4" />
            </video>
            <div class="mask rgba-purple-slight"></div>
        </div>
    </div>
   
    <div class="carousel-item">
        
        <div class="view">
            
            <video id="vid" class="video-fluid" autoplay="" muted="" style="width: 100%;height: 100vh!important;object-fit:fill;">
                <source src="assets/Mp4/Jeff bezos.mp4" type="video/mp4" />
            </video>
            <div class="mask rgba-black-strong"></div>
        </div>
    </div>
    
    <div class="carousel-item">
        
        <div class="view">
            
            <video id="vid" class="video-fluid" autoplay="" muted="" style="width: 100%;height: 100vh!important;object-fit:fill;">
                <source src="assets/Mp4/Larry page.mp4" type="video/mp4" />
            </video>
            <div class="mask rgba-black-strong"></div>
        </div>
    </div>
   
</div>