Pause video on slide - html

Question

I want to pause the VIDEO when I slide by dragging or using slide next, prev buttons.
It doesn't matter which slider. it can be useful-swiper or owl-carousel
I'm using ngx-useful-swiper as my Carousel.
I can use ngx-owl-carousel-o instead, But if it worked with anyone
My HTML
<swiper [config]="heroSlider" #usefulSwiper>
<div class="swiper-wrapper">
<div class="swiper-slide text-center" *ngFor="let item of sections.about_video; index as i">
<video
poster="{{ fileUrl + item.thumbnail }}"
playsinline
autoplay="false"
muted
controls="false"
onloadedmetadata="this.muted = true"
src="{{ fileUrl + item.video }}"
id="video"
#video
></video>
</div>
</div>
<button class="btn p-0 btn-prev" (click)="previousSlide()">
<svg
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 26 43"
style="enable-background: new 0 0 26 43"
xml:space="preserve"
>
<path
id="Path_3540"
class="st0"
d="M21.5,43c2.5,0,4.5-2,4.5-4.5c0-1.2-0.5-2.4-1.3-3.2L10.9,21.5L24.7,7.7
c1.7-1.8,1.7-4.7-0.1-6.4c-1.8-1.7-4.5-1.7-6.3,0l-16.9,17c-1.8,1.8-1.8,4.6,0,6.4l16.9,17C19.1,42.5,20.3,43,21.5,43z"
/>
</svg>
</button>
<button class="btn p-0 btn-next" (click)="nextSlide()">
<svg
class="icon"
version="1.1"
id="Layer_1"
x="0px"
y="0px"
viewBox="0 0 26 43"
style="enable-background: new 0 0 26 43"
xml:space="preserve"
>
<path
id="Path_3539"
class="st0"
d="M4.5,43C2,43,0,41,0,38.5c0-1.2,0.5-2.4,1.3-3.2l13.7-13.8L1.3,7.7c-1.7-1.8-1.7-4.7,0.1-6.4c1.8-1.7,4.5-1.7,6.3,0l16.9,17c1.8,1.8,1.8,4.6,0,6.4l-16.9,17C6.9,42.5,5.7,43,4.5,43z"
/>
</svg>
</button>
</swiper>
My TS
heroSlider: SwiperOptions = {
loop: false,
slidesPerView: 1,
on: {
transitionEnd: function (Swiper) {
console.log(Swiper);
},
},
};

Answer 1

If you simply mean you want to pause video when you click the next or previous buttons, you can add a listener for those buttons and in that listener pause the video.
Some example below showing adding an ID to the button and then using this to find the button in your Javascript and add a listener.
You can add a resume button also or just have the user click play on the video.
<button id="btnNext" class="btn p-0 btn-prev" (click)="previousSlide()">
var vid1 = document.getElementById("YourVideoID");
var btnNext = document.getElementById("NextButton");
var btnPrev = document.getElementById("PrevButton");
var btnResume = document.getElementById("PrevButton");
btnNext.addEventListener("click", function() {
vid1.pause()
});
btnPrev.addEventListener("click", function() {
vid1.pause()
});
btnResume.addEventListener("click", function() {
vid1.play()
});