我创建了一个适合我的响应式示例，我发现它非常简单，看看我的 carousel-fill：
.carousel-fill {
height: -o-calc(100vh - 165px) !important;
height: -webkit-calc(100vh - 165px) !important;
height: -moz-calc(100vh - 165px) !important;
height: calc(100vh - 165px) !important;
width: auto !important;
overflow: hidden;
display: inline-block;
text-align: center;
}
.carousel-item {
text-align: center !important;
}
我的导航高度+页脚小于 165 像素，因此该值对我有用。取一个适合您的值，我从引导程序中覆盖了 .carousel-item，因此请确保视频居中。
我的轮播看起来像这样，注意视频标签上的“carousel-fill”。
<div>
<div id="myCarousel" class="carousel slide carousel-fade text-center" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="carousel-item active">
<video autoplay muted class="carousel-fill">
<source src="~/Video/CATSTrade.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="carousel-caption">
<h2>CATS IV Trade engine</h2>
<p>Automated trading for high ROI</p>
</div>
</div>
<div class="carousel-item">
<video muted loop class="carousel-fill">
<source src="~/Video/itrs.mp4" type="video/mp4">
</video>
<div class="carousel-caption">
<h2>Machine learning</h2>
<p>Machine learning specialist</p>
</div>
</div>
<div class="carousel-item">
<video muted loop class="carousel-fill">
<source src="~/Video/frequency.mp4" type="video/mp4">
</video>
<div class="carousel-caption">
<h3>Low latency development</h3>
<p>Create ultra fast systems with our consultants</p>
</div>
</div>
<div class="carousel-item">
<img src="~/Images/data pipeline faded.png" class="carousel-fill" />
<div class="carousel-caption">
<h3>Big Data</h3>
<p>Maintain, generate, and host big data</p>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#myCarousel" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#myCarousel" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
如果有人需要像我一样控制视频，我会像这样开始和停止视频：
<script language="JavaScript" type="text/javascript">
$(document).ready(function () {
$('.carousel').carousel({ interval: 8000 })
$('#myCarousel').on('slide.bs.carousel', function (args) {
var videoList = document.getElementsByTagName("video");
switch (args.from) {
case 0:
videoList[0].pause();
break;
case 1:
videoList[1].pause();
break;
case 2:
videoList[2].pause();
break;
}
switch (args.to) {
case 0:
videoList[0].play();
break;
case 1:
videoList[1].play();
break;
case 2:
videoList[2].play();
break;
}
})
});
</script>