当幻灯片项在Bootstrap Carousel </video>中处于活动状态时，将自动播放添加到<video>

Question

我正在构建一个Bootstrap Carousel，每张幻灯片都是mp4视频。

到目前为止它工作正常，但我观察到即使滑块不可见，视频也会循环播放，这将使得当显示下一个滑块时，视频将不会从头开始。

我可以用数据间隔控制每张幻灯片的显示时间，并使其与视频的长度匹配，但如果视频不会从开头开始，并且在间隔的中间，则有点无意义再次循环。

这样，您认为只有当父元素具有有效类时，我才能动态地将自动播放属性添加到每个视频中吗？

最后，我正在寻找的效果是：显示幻灯片，视频从头到尾播放，下一张幻灯片播放，视频播放从头到尾等等。

有什么想法？

<div class="item active" data-interval="4000">
     <video width="100%" loop autoplay muted preload="auto">
       <source src="<?php bloginfo( 'template_url' ); ?>/slides/vid1.mp4" type="video/mp4">
     </video> 
</div>

<div class="item" data-interval="3000">
     <video width="100%" loop autoplay muted preload="auto">
        <source src="<?php bloginfo( 'template_url' ); ?>/slides/vid2.mp4" type="video/mp4">
     </video> 
</div>