[SOLVED] Videogular in Angular 2 using the VgAPI

Videogular in Angular 2 using the VgAPI

I started using Videogular2 and I'm trying to play and control multiple videos simultenously.

According to the documentation, you can use a master and slave videos to control both of them using the same controls, unfortunately 2 videos are a limited number to my solution.

There is also the vgFor, where you can define for which video the controls should work, but again, I cannot input multiple videos. http://videogular.github.io/videogular2/docs/modules/controls/vg-controls/

The other option is to use the API https://github.com/videogular/videogular2/blob/master/docs/getting-started/using-the-api.md

It says, the VgAPI service controls all media objects inside vg-player element.

But i'm having problems achieving this.

I currently have a vg-player with 4 videos inside. At the bottom I have a play and stop buttons, separated from the vg-player.

// video-player.component.html

<vg-player (onPlayerReady)="onPlayerReady($event)">
  <video [vgMedia]="media" preload="auto">
    <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
  </video>

  <video [vgMedia]="media1"preload="auto">
    <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
  </video>

  <video [vgMedia]="media2" preload="auto">
    <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
  </video>

  <video [vgMedia]="media3" preload="auto">
    <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
  </video>
</vg-player>


<button ion-button (click)="playVideo()" id="playButton" [hidden]="isPlaying">Play</button>
<button ion-button (click)="stopVideo()" id="stopButton" [hidden]="isPlaying">Stop</button>

//video-player.component.ts

import { Component, OnInit, ElementRef } from '@angular/core';
import { VgPlayer, VgAPI } from 'videogular2/core';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.css']
})

export class VideoPlayerComponent implements OnInit {
  preload: string = 'auto';
  api: VgAPI;
  isPlaying: boolean;

  constructor(private _element: ElementRef) {
    this.isPlaying = false;
  }

  onPlayerReady(api: VgAPI) {
    this.api = api;

    console.log('api', api);

    this.api.getDefaultMedia().subscriptions.ended.subscribe(
      () => {
        // Set the video to the beginning
        this.api.getDefaultMedia().currentTime = 0;
      }
    );
  }

  playVideo(api: VgAPI) {
    this.api = api;
    console.log('Playing video . . . ');
    this.isPlaying = true;
    this.api.play();
  }

  stopVideo(api: VgAPI) {
    this.api = api;
    console.log('Stopping video . . . ');
    this.isPlaying = false;
    this.api.pause();
    this.api.getDefaultMedia().currentTime = 0;
  }

}

I currently get two mistakes:

cannot read property 'nodeName' of undefined at VgMedia (when I start the videoPlayer component)
Cannot read property 'play' of undefined (when I click the play or stop buttons)

Solution

Using the API works for controlling one video, but not more than 2 simultaneously. What I did was setting one master video and multiple slaves, in this way, the API would be used only with the master media, and the other medias would be controlled based on the values coming from the master media.