我正在使用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播放活动幻灯片的视频。请帮忙...
我希望我会按照你的意思,IonSlides
提供您可以得到的方法currentIndex
与IonSlides
实例。
获取当前索引,然后您可以获取循环要使用的当前数组。因此,我们可以通过几行来满足您的要求。并且使用源代码,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;
//.***
};
最后,只存在HTMLMediaElement
有play
和pause
你想一想.The承诺逻辑。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;
}
}
希望此信息对您有所帮助。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句