如何解决HTML5视频标记在Bootstrap 4轮播中无法正常工作
我正在尝试在网页中添加bootstrap 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。