如何在离子中的html元素ID中获取当前的离子幻灯片?

用户名

我正在使用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播放活动幻灯片的视频。请帮忙...

陈ach

我希望我会按照你的意思,IonSlides提供您可以得到的方法currentIndexIonSlides实例。

获取当前索引,然后您可以获取循环要使用的当前数组。因此,我们可以通过几行来满足您的要求。并且使用源代码,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);
};

这样,如果客户端要导航到其他幻灯片,则要自动播放视频。playvideo灵活的id替换函数args,看起来像下面的代码:

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

最后,只存在HTMLMediaElementplaypause你想一想.The承诺逻辑。play方法拒绝支持NotAllowedErrorNotSupportedError,因此您可以取消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;
  }
}

希望此信息对您有所帮助。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Ionic App中模态的“离子-幻灯片箱”问题

来自分类Dev

如何获得离子幻灯片的实例

来自分类Dev

在JQuery Cycle中,如何获取当前幻灯片的src?

来自分类Dev

如何在Glide.js中获取当前幻灯片编号

来自分类Dev

离子框架ionSlideBox:如何在按钮ng单击后更改幻灯片?

来自分类Dev

离子幻灯片内部的Google地图

来自分类Dev

如何在Bootstrap 3 Carousel中输出当前幻灯片编号?

来自分类Dev

如何在Bxslider中的新幻灯片上滑动新幻灯片?

来自分类Dev

如何在reveal.js中获取堆叠幻灯片的数量

来自分类Dev

如何在Android中编写动态幻灯片

来自分类Dev

如何在python中制作随机照片幻灯片

来自分类Dev

如何在PowerPoint幻灯片放映中编辑文本?

来自分类Dev

如何在幻灯片菜单中动态更改textview?

来自分类Dev

如何在magento前端中添加幻灯片

来自分类Dev

如何在Android中编写动态幻灯片

来自分类Dev

如何在选项卡中创建幻灯片

来自分类Dev

如何在Shopify中暂停响应幻灯片

来自分类Dev

如何在appcelerator中隐藏幻灯片菜单?

来自分类Dev

如何在幻灯片菜单中制作搜索栏?

来自分类Dev

如何将幻灯片放到HTML中?

来自分类Dev

离子:获取离子含量中当前可见的项目

来自分类Dev

如何从代码中获取当前的离子模式

来自分类Dev

如何获取幻灯片的当前图片来源?

来自分类Dev

ionic 2:在离子幻灯片内部创建ng重复

来自分类Dev

离子5幻灯片ionSlideDidChange不要求最后一张幻灯片

来自分类Dev

跳至离子幻灯片盒中的第二张幻灯片

来自分类Dev

在PowerPoint中的当前幻灯片上跳过动画

来自分类Dev

如何更改从PowerPoint的c#加载项中显示的当前幻灯片

来自分类Dev

离子4离子幻灯片slideOptions第二次忽略

Related 相关文章

  1. 1

    Ionic App中模态的“离子-幻灯片箱”问题

  2. 2

    如何获得离子幻灯片的实例

  3. 3

    在JQuery Cycle中,如何获取当前幻灯片的src?

  4. 4

    如何在Glide.js中获取当前幻灯片编号

  5. 5

    离子框架ionSlideBox:如何在按钮ng单击后更改幻灯片?

  6. 6

    离子幻灯片内部的Google地图

  7. 7

    如何在Bootstrap 3 Carousel中输出当前幻灯片编号?

  8. 8

    如何在Bxslider中的新幻灯片上滑动新幻灯片?

  9. 9

    如何在reveal.js中获取堆叠幻灯片的数量

  10. 10

    如何在Android中编写动态幻灯片

  11. 11

    如何在python中制作随机照片幻灯片

  12. 12

    如何在PowerPoint幻灯片放映中编辑文本?

  13. 13

    如何在幻灯片菜单中动态更改textview?

  14. 14

    如何在magento前端中添加幻灯片

  15. 15

    如何在Android中编写动态幻灯片

  16. 16

    如何在选项卡中创建幻灯片

  17. 17

    如何在Shopify中暂停响应幻灯片

  18. 18

    如何在appcelerator中隐藏幻灯片菜单?

  19. 19

    如何在幻灯片菜单中制作搜索栏?

  20. 20

    如何将幻灯片放到HTML中?

  21. 21

    离子:获取离子含量中当前可见的项目

  22. 22

    如何从代码中获取当前的离子模式

  23. 23

    如何获取幻灯片的当前图片来源?

  24. 24

    ionic 2:在离子幻灯片内部创建ng重复

  25. 25

    离子5幻灯片ionSlideDidChange不要求最后一张幻灯片

  26. 26

    跳至离子幻灯片盒中的第二张幻灯片

  27. 27

    在PowerPoint中的当前幻灯片上跳过动画

  28. 28

    如何更改从PowerPoint的c#加载项中显示的当前幻灯片

  29. 29

    离子4离子幻灯片slideOptions第二次忽略

热门标签

归档