Bootstrap 4轮播mp4自动播放
Bootstrap 4轮播mp4自动播放
提问于 2018-05-10 07:01:53
我正在尝试制作一个包含Bootstrap 4.1视频的图像轮播。但是当幻灯片被激活时，我无法让视频自动播放。
我不知道我做错了什么。
非常感谢你的帮助。
$('#carousel').on('slid.bs.carousel', function(e) {
let elemento = $('#carousel .item.active video').first();
if (elemento.prop("tagName") == "VIDEO") {
elemento.get(0).play();
}
});
$('#carousel').bind('slide.bs.carousel', function(e) {
let elemento = $('#carousel .item.active video').first();
if (elemento.prop("tagName") == "VIDEO") {
elemento.get(0).pause();
}
});
$(document).bind('keyup', function(e) {
if (e.which == 39) {
$('.carousel').carousel('next');
} else if (e.which == 37) {
$('.carousel').carousel('prev');
}
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<!doctype html>
<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel" data-keyboard="true" data-interval="false">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="https://dummyimage.com/560x320/ff0/000&text=FirstSlide" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://dummyimage.com/560x320/0ff/000&text=SecondSlide" alt="Second slide">
</div>
<div class="carousel-item">
<video src="http://techslides.com/demos/sample-videos/small.mp4" loop style="margin-bottom: 100px;width:100%;height:100%;"></video>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://dummyimage.com/560x320/f0f/000&text=LastSlide" alt="Last slide">
</div>
</div>
<a class="carousel-control-prev" href="#carousel" 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="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
回答 1
Stack Overflow用户
发布于 2019-02-01 19:02:53
您需要将autoplay和playsinline属性添加到视频标签中。
<video id="video" class="" src="http://techslides.com/demos/sample-videos/small.mp4" muted autoplay playsinline />页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50263217
复制相关文章
相似问题
腾讯云开发者
