Videogular in Angular 2 using the VgAPI

Question

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)

Thanks for this code 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; } ); } — Moisés Aguilar, Dec 20 '19 at 20:37

score 0 · Answer 1 · answered Jul 01 '18 at 17:38

I do it like this.

<div class="playbutton">
  <div *ngIf="api?.state === 'playing';then playing else paused"></div>

  <ng-template #paused>
    <i class="material-icons" (click)="api.play()">play_circle_outline</i>
  </ng-template>

  <ng-template #playing>
    <i class="material-icons" (click)="api.pause()">pause_circle_outline</i>
  </ng-template>
</div>

<div class="back">
  <i class="material-icons"  (click)="prevVideo()">fast_rewind</i>
</div>
<div class="forward">
  <i class="material-icons"  (click)="nextVideo()">fast_forward</i>
</div>

for the API its

api: VgAPI;

This won't work for multiple videos, considering videogular2 only allows one master and max 1 slave. In my case I need at least 2 slave videos , one master, all playing and being controlled at the same time. — sie, Jul 25 '18 at 12:12

score 0 · Accepted Answer · answered Jul 25 '18 at 12:14

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.

Videogular in Angular 2 using the VgAPI

2 Answers2