我有一个引导视频轮播，但是当页面加载或轮播上的项目更改时，它不会自动播放视频。有关如何执行此操作的任何想法？我需要第一个视频播放，然后在轮播更改项目时播放每个视频。我不在乎我们是使用JQuery还是仅使用HTML或我只需要它就能工作的任何东西。
<?php include('header.php');?>
<!-- Carousel =========================== -->
<div id="myCarousel" class="carousel slide" 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>
</ol>
<div class="carousel-inner" role="listbox">
<!-- first slide -->
<div class="item active">
<video autoplay="true" loop="true" class="first-slide">
<source src="StockTemplates/4thofJuly/4thofJuly_HD.mp4" type="video/mp4">
</video>
<div class="container">
<div class="carousel-caption">
<h1>Welcome to Creative Engine</h1>
<p>text about ce</p>
</div><!-- end .carousel-caption -->
</div><!-- end .container -->
</div><!-- end .item active -->
<!--End first slide-->
<!-- second slide -->
<div class="item">
<video class="second-slide" loop="true" autoplay="true">
<source src="StockTemplates/25PercentOff/25PercentOff_HD.mp4" type="video/mp4">
</video>
<div class="container">
<div class="carousel-caption">
<h1>Slide 2 Heading</h1>
<p>slide 2 text</p>
</div><!-- end .carousel-caption -->
</div><!-- end .container -->
</div><!-- end .item active -->
<!--end second slide-->
<!-- third slide -->
<div class="item">
<video class="third-slide" loop="true" autoplay="true">
<source src="StockTemplates/Abstract105/Abstract105_HD.mp4" type="video/mp4">
</video>
<div class="container">
<div class="carousel-caption">
<h1>Slide 3 Heading</h1>
<p>Slide 3 Text</p>
</div><!-- end .carousel-caption -->
</div><!-- end .container -->
</div><!-- end .item active -->
<!--end third slide-->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glipicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a><!-- end .left carousel-control -->
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glipicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a><!-- end .right carousel-control -->
</div><!-- end .carousel-inner -->
</div><!-- end #myCarousel -->
<div class="descriptionSection">
<div class="container">
<h2 class="mainDescriptionHeading">Creating the perfect ad has never been easier</h2>
<div class="row">
<div class="col-md-3">
<img src="test.jpg" class="icon img-circle center-block">
<h4 class="descriptionHeading">Setup a display</h4>
<p class="descriptionParagraph">Tell us the resolution of your display and what file types it supports.</p>
</div>
<div class="col-md-3">
<img src="test.jpg" class="icon img-circle center-block">
<h4 class="descriptionHeading">Choose a template</h4>
Search though our growing libary of templates and choose the perfect theme for your ad!
</div>
<div class="col-md-3">
<img src="test.jpg" class="icon img-circle center-block">
<h4 class="descriptionHeading">Customize</h4>
<p class="descriptionParagraph">type in a custom message, choose your colors, and upload your company logo</p>
</div>
<div class="col-md-3">
<img src="test.jpg" class="icon img-circle center-block">
<h4 class="descriptionHeading">Get the video</h4>
<p class="descriptionParagraph">Once we've finished generating your video, we'll send you a link to download it.</p>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4 centerDescriptionButton">
<button type="button" class="btn btn-primary btn-block">Try it now</button>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<h2 class="mainDescriptionHeading">Popular Templates</h2>
</div>
<div class="row">
<!--card-->
<div class="col-md-4">
<div class="card">
<video src="CreativeEngine/24052/COURTSMASH.mp4" alt="Card image cap" controls loop="true"></video>
<div class="card-body">
<p class="card-title">Card title</p>
<p class="card-text">Card Data bla bla bla.</p>
<a href="#" class="btn btn-primary btn-block">Customize</a>
</div>
</div>
</div>
<!--End Card-->
<!--card-->
<div class="col-md-4">
<div class="card">
<video src="CreativeEngine/24052/COURTSMASH.mp4" alt="Card image cap" controls loop="true"></video>
<div class="card-body">
<p class="card-title">Card title</p>
<p class="card-text">Card Data bla bla bla.</p>
<a href="#" class="btn btn-primary btn-block">Customize</a>
</div>
</div>
</div>
<!--End Card-->
<!--card-->
<div class="col-md-4">
<div class="card">
<video src="CreativeEngine/24052/COURTSMASH.mp4" alt="Card image cap" controls loop="true"></video>
<div class="card-body">
<p class="card-title">Card title</p>
<p class="card-text">Card Data bla bla bla.</p>
<a href="#" class="btn btn-primary btn-block">Customize</a>
</div>
</div>
</div>
<!--End Card-->
<!--card-->
<div class="col-md-4">
<div class="card">
<video src="CreativeEngine/24052/COURTSMASH.mp4" alt="Card image cap" controls loop="true"></video>
<div class="card-body">
<p class="card-title">Card title</p>
<p class="card-text">Card Data bla bla bla.</p>
<a href="#" class="btn btn-primary btn-block">Customize</a>
</div>
</div>
</div>
<!--End Card-->
<!--card-->
<div class="col-md-4">
<div class="card">
<video src="CreativeEngine/24052/COURTSMASH.mp4" alt="Card image cap" controls loop="true"></video>
<div class="card-body">
<p class="card-title">Card title</p>
<p class="card-text">Card Data bla bla bla.</p>
<a href="#" class="btn btn-primary btn-block">Customize</a>
</div>
</div>
</div>
<!--End Card-->
<!--card-->
<div class="col-md-4">
<div class="card">
<video src="CreativeEngine/24052/COURTSMASH.mp4" alt="Card image cap" controls loop="true"></video>
<div class="card-body">
<p class="card-title">Card title</p>
<p class="card-text">Card Data bla bla bla.</p>
<a href="#" class="btn btn-primary btn-block">Customize</a>
</div>
</div>
</div>
<!--End Card-->
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-4 centerDescriptionButton">
<button type="button" class="btn btn-primary btn-block">See all templates</button>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分：0)
将preload="auto"添加到<video>标记中。