CODEWITHSUNDEEP
javascriptjquerycssowl-carousel
elhamb
elhamb

Reputation: 91

how to run autoplay video in owl carousel if it has video?

I use an owl carousel and I want to autoplay the video when I reach to that slide that have a video .and I see similar answers like Owl Carousel VIDEO Autoplay dosent work and test in my project but my code and the other codes do not work.and I have a textarea on every slide and I want the slide do not change to the next slide when I am writing a comment in textarea. how can I do it? tnx

  <div class="owl-carousel  owl-theme slideHeighlight">
              <div class="item">
                 <figure class="fig-highlight">
                    <img src="Images/high1.jpg" />
                       <figcaption>
                       <div class="highlight-cm">
                          <textarea class="txtarea-cm" rows="1" placeholder="send message"></textarea><button type="submit" class="btn btn-send btnhighlight" >send</button>
                       </div>
                    </figcaption>
                 </figure>
              </div>
              <div class="item">
                 <figure class="fig-highlight">
                    <img src="Images/high2.jpg" />
                    <figcaption>
                       <div class="highlight-cm">
                          <textarea class="txtarea-cm" rows="1" placeholder="send message"></textarea><button type="submit" class="btn btn-send btnhighlight" >send</button>
                       </div>
                    </figcaption>
                 </figure>
              </div>
              <div class="item item-video">
                 <figure class="fig-highlight">
                    <video>
                       <source src="Images/video2.mp4" type="video/mp4" />
                    </video>
                  <figcaption>
                       <div class="highlight-cm">
                          <textarea class="txtarea-cm" rows="1" placeholder="send message"></textarea><button type="submit" class="btn btn-send btnhighlight" >send</button>
                       </div>
                    </figcaption>
                 </figure>
              </div>
           </div>

my script:

                $('.slideHeighlight').owlCarousel({
  rtl: true,
  margin: 10,
  nav: true,
  loop: false,
  autoplay: true,
  singleItem: true,
  video: true,
  responsive: {
     0: {
        items:1
     },
     567: {
        items:1
     },
     600: {
        items:1
     },
     900: {
        items: 1
     }

  }
   });

        $(document).on('click', '.slideHeighlight', function () {
       if ($(this).next().hasClass('item-video')) {
        $(this).find(".fig-highlight video").play();
       }
  });

Upvotes: 0

Views: 7284

Answers (2)

elhamb
elhamb

Reputation: 91

I found that browsers has permisson to autoplay video and sound automatically and so I put button play for play

Upvotes: 0

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

You need something like that

Demo

 owl.on('changed.owl.carousel', function(event) {
   $(".owl-item video").each(function(index, value) {
     this.pause();
     this.currentTime = 0;

   });
   $(".owl-item.active video").each(function(index, value) {
     this.play();
   });
 })

if it doesn't work you can try this

$(".owl-item").each(function(index, value) {
     this.pause();
     this.currentTime = 0;
      this.play();
});

Upvotes: 2

Related Questions