Идентификатор передачи в слайд-шоу видео в Angular 12
Я создал слайд-шоу видео в своем проекте Ionic 5 Angular 12. Я также создал кнопку воспроизведения/паузы, чтобы пользователь мог воспроизводить или приостанавливать каждое видео. Но каждый раз, когда я нажимаю на одно видео, все видео воспроизводятся, а не только одно. Думаю, мне нужно передать идентификатор видео функции воспроизведения/паузы .ts, верно? Или есть другой способ?
HTML. media - это параметры видео (объекта), такие как идентификатор, имя и т. д.
<ion-slide *ngFor = "let media of medias | filterByType: mediaType; let i = index">
<ng-container>
<div class = "container" (click) = "playVideo()">
<video autoplay = "autoplay" webkit-playsinline = "true" playsinline = "true"
onloadedmetadata = "this.muted=true" class = "fillWidth" preload = "metadata"
#video>
<source [src] = "media?.image_path" [type] = "'video/webm'">
<source [src] = "media?.image_path" [type] = "'video/mp4'">
<source [src] = "media?.image_path" [type] = "'video/ogg'">
</video>
</div>
</ng-container>
</ion-slide>
.тс
export class HomePage implements OnInit {
@ViewChild('video') myVideo: ElementRef;
isplay = false;
playVideo(){
if (this.isplay){
this.myVideo.nativeElement.pause();
}
else{
this.myVideo.nativeElement.play();
}
this.isplay=!this.isplay
}
Любая помощь? Спасибо
Ответы 1
Вы по-прежнему можете использовать код js в своем проекте и напрямую обращаться к DOM (не забывайте использовать его с осторожностью). Попробуйте что-то вроде:
<ion-slide *ngFor = "let media of medias | filterByType: mediaType; let i = index">
<ng-container>
<div class = "container" (click) = "playVideo('video'+i)">
<video autoplay = "autoplay" webkit-playsinline = "true" playsinline = "true"
onloadedmetadata = "this.muted=true" class = "fillWidth" preload = "metadata"
[id] = "'video'+i">
<source [src] = "media?.image_path" [type] = "'video/webm'">
<source [src] = "media?.image_path" [type] = "'video/mp4'">
<source [src] = "media?.image_path" [type] = "'video/ogg'">
</video>
</div>
</ng-container>
</ion-slide>
.тс:
playVideo(id: string){
if (this.isplay){
(document.getElementById(id) as HTMLMediaElement).pause();
}
else{
(document.getElementById(id) as HTMLMediaElement).play();
}
this.isplay=!this.isplay
}
У вас есть много элементов, поэтому, вероятно, вам нужно сохранить isplay для каждого из них или приостановить предыдущее видео перед воспроизведением нового.
и id (id:HTMLElement) я получаю. Аргумент типа «HTMLElement» не может быть назначен параметру типа «string».ts(2345)
Это было больше похоже на концепт. Я обновил ответ, чтобы исправить первый комментарий. Я не знаю, к какой строке относится вторая ошибка.
Извини, Дразу, ты тоже это видишь? это для пользовательских игроков stackoverflow.com/questions/74565766/…
Да, хорошая мысль, но, как вы сказали, вы должны использовать ее с осторожностью. Я получаю сообщение «Игра свойств не существует в HTMLElement».