video not auto playing when refresh page

[mathiasVoelcker]

Description

I have a webpage with a videogular component, and I want the video to play automatically once the user enters the page. If I navigate to the page through an url, the video play fine, but if I reload the page, the video don't play.

Expected Behavior

Video play automatically when I reload the page

Actual Behavior

Video doesn't play automatically when I reload the page

Steps to Reproduce

here is my code:

<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}}"
        id="singleVideo"
        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();
  }

}