<vg-player (onPlayerReady)="onPlayerReady($event)" [style.width.px]="width" [style.height.px]="height">    <vg-overlay-play></vg-overlay-play>        <vg-controls vgFor="singleVideo">        <vg-play-pause></vg-play-pause>        <vg-mute></vg-mute>        <vg-volume></vg-volume>        <vg-fullscreen></vg-fullscreen>    </vg-controls>    <video #media        [vgMedia]="media"        src="{{videoUrl}}"               type="video/mp4"        preload="auto"        autoplay="true"        crossorigin        >    </video></vg-player>

import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';import { VgAPI } from 'videogular2/compiled/core';@Component({  selector: 'video-player',  templateUrl: './video-player.component.html',  styleUrls: ['./video-player.component.css']})export class VideoPlayerComponent  {  @Input()   set src(src: string)  {    this.videoUrl = src;    if (this.api != null)    {      this.playVideo();    }  }  @Input() height: number;  @Input() width: number;  @Output() onFinish = new EventEmitter<any>();  videoUrl: string;  isPlaying: boolean;  constructor() { }  api: VgAPI  onPlayerReady(api: VgAPI) {    this.api = api;    this.playVideo();    this.api.getDefaultMedia().subscriptions.ended.subscribe(      () => {        this.api.getDefaultMedia().currentTime = 0;        this.finishVideo();      }    );  }  playVideo() {    this.api.currentTime = 0;    this.api.play();  }  finishVideo() {    this.onFinish.emit();  }}