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

【问题标题】：How to get current ion-slide in html element id in Ionic?如何在 Ionic 的 html 元素 id 中获取当前的 ion-slide？
【发布时间】：2020-05-27 15:21:59
【问题描述】：

我正在使用 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

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

在此示例中，我尝试通过 HTML 视频元素 ID 播放活动幻灯片的视频。请帮忙...

【问题讨论】：

您可以使slide 可点击并将所需信息传递到您的playvideo() 我想这很容易。
是的，我们可以这样做，但我想在 html 视频元素 ID 中加载活动幻灯片
那么，您想要活动幻灯片的当前索引以及幻灯片何时更改？
不，我想获取视频元素 id

标签： javascript html angular typescript ionic-framework

【解决方案1】：

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

获取当前索引然后您可以获得循环的当前数组。所以我们有几行来满足您的要求。对于源代码，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 函数 args 替换为灵活的 id，它看起来像下面的代码：

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

最后，只有HTMLMediaElement 有play 和pause。Promise 逻辑你要考虑一下。play 方法拒绝支持NotAllowedError 和NotSupportedError，所以你可以把你的null 条件关闭。您可以按照关于异步函数的简单代码：

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

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

【讨论】：