如何在 Ionic 的 html 元素 id 中获取当前的 ion-slide？

Question

我正在使用 ion-slide 并且在幻灯片中，我添加了一个 HTML 视频元素，我想在幻灯片更改时获取活动 ion-slide 视频元素的 ID。

这是我的 ts 代码：

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

这是我的 HTML

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

在这个例子中，我试图通过 HTML 视频元素 id 播放活动幻灯片的视频。请帮忙...

Answer 1

我希望我会按照你的意思，IonSlides提供你可以currentIndex用你的IonSlides实例获取的方法。

获取当前索引，然后您可以获得循环所针对的当前数组。所以我们有几行来完成您的要求。对于源代码，ionSlideDidChange不接受任何参数，因此您会在控制台上获得 null 或 undefined 。

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

这样，如果您想在您的客户导航到其他幻灯片时自动播放视频。用playvideo灵活的 id替换函数 args，它看起来像下面的代码：

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

最后，只有HTMLMediaElement具有play和pause.The Promise 逻辑的你必须考虑一下。play方法拒绝支持NotAllowedError和NotSupportedError，因此您可以取消空条件。您可以遵循有关异步函数的简单代码：

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

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