Javascript 如何在Ionic中获取html元素id中的当前离子幻灯片？

我正在使用离子幻灯片，在幻灯片中，我添加了一个HTML视频元素，我想在幻灯片更改时获取活动离子幻灯片视频元素的ID

这是我的ts代码：

@ViewChild（IonSlides，{static:false}）幻灯片：IonSlides；
slideOpts={
方向：“垂直”
};
主阵列=[
{
id:0，
缩略图URL:'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，
缩略图URL:'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，
缩略图URL:'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，
缩略图URL:'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'
}
];
播放视频（）{
let videoPlayer1:HTMLVideoElement=document.getElementById（this.main数组[this.index].id）
视频播放器1.暂停（）；
videoPlayer1.currentTime=0；
const playPromise=videoPlayer1.play（）；
如果（playPromise！==null）{
playPromise.catch（（）=>{
视频播放器1.play（）；
videoPlayer1.autoplay=true；
})
}
};
SlidedChange（ev:any）{
log（'slideddchange:'，ev）；
};
slideWillChange（ev:any）{
log（'slideWillChange:'，ev）；
};

这是我的HTML

您的浏览器不支持HTML5视频。

---

在本例中，我试图通过HTML视频元素id播放活动幻灯片的视频。请帮助…

我希望我能理解您的意思，

IonSlides

提供了一种方法，您可以使用

IonSlides

实例获取

currentIndex

获取当前索引，然后可以获取循环所针对的当前数组。所以我们有几行来满足你的要求。对于源代码，

ionSlideDidChange

不接受任何参数，因此您将在控制台上获得null或未定义

//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);
};

因此，如果您的客户端正在导航到其他幻灯片，那么您希望自动播放视频。用灵活的id替换

playvideo

函数args，代码如下：

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

---

我希望这些信息能对您有所帮助。

您可以单击

幻灯片

并将所需信息传递到您的

播放视频（）

我想这会很容易。是的，我们可以这样做，但我想在html视频元素idSo中加载活动幻灯片。您想要活动幻灯片的当前索引，并且每当幻灯片更改时？否，我想获取视频元素id

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

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;
  }
}