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

Question

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

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>

在此示例中，我尝试通过 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 .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;
  }
}

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