CODEWITHSUNDEEP
javascripthtmlangulartypescriptionic-framework
user9088454
user9088454

Reputation: 1122

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

I am using ion-slide and in slide, I added an HTML video element, I want to get the 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 the active slide by HTML video element id. Please help...

Upvotes: 4

Views: 2119

Answers (1)

Rach Chen
Rach Chen

Reputation: 1392

I hope I would follow your meaning, IonSlides provide the method that you can get the currentIndex with your IonSlides instance.

Get the current Index then you could get the current Array that the loop for. So we got a few lines to accomplish your requirement. And with the source code, ionSlideDidChange didn't accept any argument so that you would get null or undefined on your console.

//mention of args,do not put any , just rid it off.
slideDidChange() {
  let currentIndex = this.slides.getActiveIndex(); 
  let currentElementId = this.mainArray[currentIndex].id;
  this.playvideo(currentElementId);
};

So that if you want to autoplay the video if your client is navigating to other slides. Replace the playvideo function args with the flexible id, it would seem like below code:

playvideo(videoElementId) {
  let videoPlayer: HTMLMediaElement = < HTMLMediaElement >document.getElementById(this.mainArray[this.index].id)
  //.***
  //. your code;
  //.***
};

Finally , there is only HTMLMediaElement has the play and pause.The Promise logical you have to think about it.play method rejection support NotAllowedError and NotSupportedError, so you can take your null condtion off.You can following that simple code about async function:

async function playVideo(videoElementId: Number) {
  let videoPlayer: HTMLMediaElement = <HTMLMediaElement>document.getElementById(videoElementId);
  videoPlayer.pause();
  try {
    await videoPlayer.play();
  } catch(err) {
    await videoPlayer.play(); // with your logic
    videoPlayer.autoplay = true;
  }
}

I hope this info will help you.

Upvotes: 5

Related Questions