html - 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 分开。

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

}

我目前有两个错误:

• 无法读取 VgMedia 处未定义的属性“nodeName”(当我启动 videoPlayer 组件时)

• 无法读取未定义的属性“播放”(当我单击播放或停止按钮时)

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

应用程序接口(interface):VgAPI；