How to get current ion-slide in html element id in Ionic?

#1

I am using ion-slide and in slide i added a HTML video element, i want to get id of active ion-slide video element when slide change.

here my ts code:

@ViewChild(IonSlides, { static: false }) slides: IonSlides;
    slideOpts = {
        direction: 'vertical'
      }
      mainArray = [
        {
          id: 0,
          thumbnailUrl: 'https://i.picsum.photos/id/803/200/300.jpg',
          mp4: 'https://www.w3schools.com/html/mov_bbb.mp4',
          ogg: 'https://www.w3schools.com/html/mov_bbb.ogg'
        },
        {
          id: 1,
          thumbnailUrl: 'https://i.picsum.photos/id/803/200/300.jpg',
          mp4: 'https://www.w3schools.com/html/mov_bbb.mp4',
          ogg: 'https://www.w3schools.com/html/mov_bbb.ogg'
        },
        {
          id: 2,
          thumbnailUrl: 'https://i.picsum.photos/id/803/200/300.jpg',
          mp4: 'https://www.w3schools.com/html/mov_bbb.mp4',
          ogg: 'https://www.w3schools.com/html/mov_bbb.ogg'
        },
        {
          id: 3,
          thumbnailUrl: 'https://i.picsum.photos/id/803/200/300.jpg',
          mp4: 'https://www.w3schools.com/html/mov_bbb.mp4',
          ogg: 'https://www.w3schools.com/html/mov_bbb.ogg'
        },
      ]

       playvideo() {
        let videoPlayer1: HTMLVideoElement = <HTMLVideoElement>document.getElementById(this.mainArray[this.index].id)
        videoPlayer1.pause();
        videoPlayer1.currentTime = 0;
        const playPromise = videoPlayer1.play();
        if (playPromise !== null) {
          playPromise.catch(() => {
            videoPlayer1.play();
            videoPlayer1.autoplay = true;
          })
        }
      }
    
      slideDidChange(ev: any) {
        console.log('slideDidChange: ', ev);
      }
    
      slideWillChange(ev: any) {
        console.log('slideWillChange: ', ev);
      }

Here my HTML

     <ion-slides #slides [options]="slideOpts" (ionSlideDidChange)="slideDidChange(slides)"
        (ionSlideWillChange)="slideWillChange(slides)">
        <ion-slide *ngFor="let videoUrl of mainArray">
          <video [id]="videoUrl.id" poster='{{videoUrl.thumbnailUrl}}' preload="none" controls>
            <source src="{{videoUrl.mp4}}" type="video/mp4" autostart="false">
            <source src="{{videoUrl.ogg}}" type="video/ogg" autostart="false">
            Your browser does not support HTML5 video.
          </video>
        </ion-slide>
      </ion-slides>

In this example i am trying to play video of active slide by html video element id. Please help…