CODEWITHSUNDEEP
javascripthtmlvideobootstrap-4carousel
Arvin
Arvin

Reputation: 181

How to reload video in image carousel?

I have an image carousel and i set a video inside of it, first time video working normally it stay at the end of video and change to another slide,but second time the video is not going to play again from beginning it stay at the end of time it is in pause i should play it by clicking the start button. How can i fix this problem as every time video start from beginning when it is turn of video slide? I will be thankful if somebody help.

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Carousel</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
 .carousel-inner{
     width: 100%;
     height: 760px;
 }
.forvideo{
    width: 100%;
    height: 760px;
    object-fit: cover;
    z-index: -100;
}
.carouselplace{
   margin-top: 9%;
}
</style>
</head>
<body>

<div class="container carouselplace">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner">
    <div class="item active">
        <img src="Pic/Sample Movie & img/3.jpg" alt="Picture" style="width:100%;">
    </div>
     <div class="item">
        <video autoplay muted  controls="controls" class="forvideo">
            <source src="Pic/Sample Movie & img/Samplemovie.mp4" type="video/mp4">
        </video>
     </div>
    <div class="item">
        <img src="Pic/Sample Movie & img/4.jpg" alt="Picture" style="width:100%;">
      </div>
     
    </div>
</div>
</div>
<script>

    $('.carousel').carousel({
  interval: 3000
})

$('video').on('play', function (e) {
    $("#myCarousel").carousel('pause');
});
$('video').on('stop pause ended', function (e) {
    $("#myCarousel").carousel();
});

</Script>
</body>
</html>

Upvotes: 0

Views: 931

Answers (1)

Vinay
Vinay

Reputation: 7676

Use slid.bs.carousel slide change event it event.target will hold the destination slide which just got shown

$("#myCarousel").on('slid.bs.carousel', function(e){
    var vid = $(e.target).find('video')
    if(vid.length >0){
        vid[0].load();
    }
    alert('The carousel has finished sliding from one item to another!');
});

Upvotes: 1

Related Questions