I'm currently working on displaying a video in my Angular page and I'm trying to set the currentTime property of the video to start playing at a specific time.
In JavaScript, you can achieve this with the following example:
document.getElementById("video").addEventListener(
"loadedmetadata",
(e) => {
e.target.currentTime = 50;
},
false
);
However, I am facing issues setting the startTime in my Angular application.
My HTML code looks like this:
<video
id="lecture-video"
controls
#video
(timeupdate)="onVideoChange($event)"
>
<source [src]="videoUrl" />
</video>
And here is the TypeScript code:
@ViewChild('video') video!: ElementRef;
ngAfterViewInit():void {
console.log(this.video.nativeElement);
console.log(this.video.nativeElement.currentTime);
}
While it works fine in Stackblitz, it doesn't work in my project. However, if I add a setTimeout function like this:
setTimeout(()=>{
console.log(this.video.nativeElement.currentTime)
}, 3000)
Then it does work. So my main question is: How can I wait or add a listener that will execute when the video is loaded?
Check out the Stackblitz example for reference: https://stackblitz.com/edit/angular-ivy-z5dzvg?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
Thank you in advance for your help!