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…