jquery - 引导轮播视频不重播
问题描述
我有一个图像和视频的轮播。视频,第一次播放没有问题,但是当我的轮播结束并重新启动时,视频不会重播。这是我的代码
<div class="top-content">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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">
<div class="carousel-item active">
<video style="margin-bottom: 100px;width:100%;height:100%;" muted autoplay>
<source src="resources/video1.mp4" type="video/mp4">
</video>
</div>
<div class="carousel-item " style="background-image: url(resources/90210.jpg);"></div>
<div class="carousel-item " style="background-image: url(resources/90219.jpg);"></div>
</div>
<a class="carousel-control-prev" href="#myCarousel" role="button" 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" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script>
$( document ).ready(function() {
$('video').on('play', function (e) {
$("#myCarousel").carousel('pause');
});
$('video').on('stop pause ended', function (e) {
$("#myCarousel").carousel();
$("#myCarousel").carousel('next');
});
});
</script>
解决方案
推荐阅读
- java - 如何从此字符串中返回多个随机数?
- powershell - PsExec64.exe 加密密码和痛是抛出错误
- sql - 生成具有唯一名称的表
- java - JBoss 给出内存问题
- dataframe - 在 PySpark 中对多个单词使用 LIKE 运算符
- dht - 大多数 DHT 节点在 bep_0005 get_peers 响应虚假“值”?
- javascript - 从 HTML 输入表单存储变量?
- matlab - 2D – 3D 点匹配、姿态估计和对应
- javascript - 无法在终端中使用 Testng.xml 文件通过 Maven 测试执行类,但在 Eclipse 中工作
- ios - 选择 UICollectionViewCell 时更改标签文本