Ionic ngFor video playing

Issue

I trying to start the video from ts in the ionic component, but if I call video.play() the video is re-created, I think.

My html code

                        <video
                            poster="https://images.unsplash.com/photo-1545486332-9e0999c535b2?ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YmxhY2t8ZW58MHx8MHx8&ixlib=rb-1.2.1&w=1000&q=80"
                            [class.blur]="asset.isHide && !asset.isSave" [attr.id]="'fullscreen-video' + i" #video
                            (click)="playPause(video)">
                            <source [src]="asset.url" type="video/mp4">
                            Sorry, your browser doesn't support embedded videos,
                            but don't worry, you can download it
                            and watch it with your favorite video player!
                        </video>

My ts code

public playPause(video: HTMLVideoElement): void {
    if (video.paused === true) {
        video.play();
        this.isPlay = true;
    } else {
        this.isPlay = false;
    }
}

error that was detected only in debug mode: executeListenerWithErrorHandling

after that error the video element in html is re-created

Solution

I fix but I use data from @Input for ngFor loop and because of this there was a problem

I fix it by rewriting @Input variable in another variable and use new in ngFor

Answered By - Ilia Verzun