videogular2 not playing video when loaded

Question

I am using videogular to make a videoplayer on mu website. I want the video to start playing once the page is loaded, without the need of the user to press the start button. I didn't succeed in anything that I tried so far. The video does work fine if I press the play button, but I can't make it run as page loads.

HTML:

<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"
    crossorigin
    >
</video>
</vg-player>

Typescript

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;
    console.log("changing src: " + 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) {
    console.log("player ready");
    this.api = api;
    this.playVideo();

    this.api.getDefaultMedia().subscriptions.ended.subscribe(
      () => {
          this.api.getDefaultMedia().currentTime = 0;
          this.nextVideo();
      }
    );
  }

  playVideo() {
    console.log("video starting")
    this.api.currentTime = 0;
    this.api.play();
  }

  nextVideo() {
    this.onFinish.emit();
  }

}

Yes, I debugged and I am sure that the api.play() is being called after the video url is properly set.

score 0 · Answer 1 · answered Mar 12 '21 at 19:34

So I found a way to fix the problem, and it turns out that it was super simple. Just add autoplay="true" to the video component

<video #media
    [vgMedia]="media"
    src="{{videoUrl}}"
    id="singleVideo"
    type="video/mp4"
    preload="auto"
    autoplay="true"
    crossorigin
    >

Its weird, though, that the videogular2 showroom rep that I was using as reference, this autoplay attribute is not used at all, although the video does play every time the screen is loaded.

videogular2 not playing video when loaded

1 Answers1