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

@gokujy wrote:

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…

Posts: 1

Participants: 1

Read full topic