Angular 2 中的 Videogular 使用 VgAPI

Question

我开始使用 Videogular2 并尝试同时播放和控制多个视频。

根据文档，您可以使用主视频和从视频来使用相同的控件来控制它们，不幸的是，我的解决方案中的 2 个视频数量有限。

还有 vgFor，您可以在其中定义控件应该对哪个视频起作用，但同样，我无法输入多个视频。 http://videogular.github.io/videogular2/docs/modules/controls/vg-controls/

另一种选择是使用 API https://github.com/videogular/videogular2/blob/master/docs/getting-started/using-the-api.md

它说，VgAPI 服务控制着 vg-player 元素内的所有媒体对象。

但是我在实现这个方面遇到了问题。

我目前有一个 vg-player，里面有 4 个视频。在底部我有一个播放和停止按钮，与 vg-player 分开。

//视频-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>

//视频-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;
  }

}

我目前有两个错误：

无法读取 VgMedia 未定义的属性 'nodeName'（当我启动 videoPlayer 组件时）
无法读取未定义的属性 'play'（当我单击播放或停止按钮时）

Answer 1

我是这样做的

<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>

对于API其

api: VgAPI;

Answer 2

使用API可以控制一个视频，但不能同时控制超过2个。我所做的是设置一个主视频和多个从属视频，这样，API 将仅与主媒体一起使用，而其他媒体将根据来自主媒体的值进行控制。

Angular 2 中的 Videogular 使用 VgAPI

Videogular in Angular 2 using the VgAPI

html

angular

video

videogular