Angular 2 中的 Videogular 使用 VgAPI答案

【问题标题】：Videogular in Angular 2 using the VgAPIAngular 2 中的 Videogular 使用 VgAPI
【发布时间】：2018-04-30 04:03:35
【问题描述】：

我开始使用 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 播放器，里面有 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 组件时）
无法读取未定义的属性“播放”（当我单击播放或停止按钮时）

【问题讨论】：

感谢这段代码 onPlayerReady(api: VgAPI) { this.api = api; console.log('api', api); this.api.getDefaultMedia().subscriptions.ended.subscribe( () => { // 设置视频开头 this.api.getDefaultMedia().currentTime = 0; } ); }

标签： html angular video videogular

【解决方案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；

【讨论】：

这不适用于多个视频，考虑到 videogular2 只允许一个主设备和最多 1 个从设备。就我而言，我需要至少 2 个从属视频，一个主视频，同时播放和控制。

【解决方案2】：

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

【讨论】：