I am facing an issue with implementing autoplay functionality for videos in an owl carousel. Despite trying different solutions found online, including this Owl Carousel VIDEO Autoplay doesn’t work, I haven't been able to make it work. Additionally, I have a requirement where the carousel should not transition to the next slide when a user is typing in the comment section located in a textarea within each slide. How can I achieve this? Thank you.
<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>
Code snippet:
$('.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();
}
});