Question

我正在尝试在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>

Answer 1

您需要将autoplay和playinline属性添加到视频代码中。

<video id="video" class="" src="http://techslides.com/demos/sample-videos/small.mp4" muted autoplay playsinline />

Bootstrap 4轮播mp4自动播放

1 个答案: