Playing video in angular

Question

I am working on a angular application and I am using video tag of html 5 in my code to play video. Code is as follows::

 <video autoplay>
          <source src="videos/video.mp4" type="video/mp4">
    </video>

In this I just want my video to play once and on completion of video I want to route to next component. How can I do this?

Answer 1

Add an event in video-tag

<div *ngIf='condition'>
    <video autoplay (ended)='route()'>
        <source src="videos/video.mp4" type="video/mp4">
    </video>
</div>
<button (click)='OnClick()'>Play</button>

In controller.ts

condition = false;
onClick() {
    this.condition = true;
}

In route() do the programmatic route.

Answer 2

Just put on your video tag (ended)="onEnd()"

Then in onEnd inside your component function you just do the router navigation