Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect When HTML Video Ends in Angular 2

I'm trying to detect when an HTML video ends in Ionic2 (Angular2 and Typescript). My code snippets are below:

Template:

<video poster="" id="v" playsinline autoplay webkit-playsinline onended="vidEnded()">
    <source src="assets/vid.mp4" type="video/mp4">
</video>

Component:

vidEnded() {
    console.log("video ended");
    this.leavePage();
}

What am I doing wrong? Thanks in advance.

like image 827
Tim Lupo Avatar asked Nov 05 '16 20:11

Tim Lupo


2 Answers

In Angular 2, you need to add - between prefix on and event name, or simply remove prefix on and surround event name with () bind an event. So, correct syntax in your case would be one of these two, you can use whichever you prefer because both do the same thing:

  • on-ended="vidEnded()"
  • (ended)="vidEnded()"

Check out Angular 2 binding syntax.

like image 54
Stefan Svrkota Avatar answered Nov 07 '22 22:11

Stefan Svrkota


You can detect when a Html video ends in Angular in this way:

Template:

<video (ended)="videoEnd()">
  <source src="assets/vid.mp4" type="video/mp4">
</video>

Component:

videoEnd() {}
like image 37
marfyl Avatar answered Nov 07 '22 22:11

marfyl