1

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?

2 Answers 2

2

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

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

Sign up to request clarification or add additional context in comments.

7 Comments

how can I call this video code on click of a button in angular?
Well, you'll only enable your button on video end... You can create an variable for this control in your component like videoEnded: boolean that will be true on this function call onEnd, after that you can click your button and go to next route
I want to show video on click of button and when video ends I need to route at other component
You can use *ngIf with a variable like showVideo, when you click on your button showVideo will be true, after that your video is shown, then just make sure in your onEnd() function you call your router navigate
but how I can bind it with click of a button? sorry if I asked silly question , I am new to angular
|
-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.

4 Comments

how can I call this video code on click of a button in angular?
Do you want to show the video on the click of a button?
yes I want to show video on click of button and when video ends I need to route at other component
got it . thanks. I am stuck at one more part of making a pop-up which I asked just now here , It would be helpful if you can guide on that too stackoverflow.com/questions/58581671/…