更新Videogular2中的视频源

Question

我正在尝试更新视频源并播放它。我在Ionic 2（Angular 2）应用程序中使用Videogular2。

预期行为

我希望视频源被更改，并在加载时开始播放。

实际行为

视频源成功更改（我可以在Chrome开发者工具/DOM中看到），海报图像也更改了。但是视频不会播放。我正在使用vg-overlay-play，但单击/点击它不会播放视频。如果我修改我的代码，在video上包含本地controls，则可以通过手动使用这些控件来播放视频。

HTML

<ion-header>
  <ion-navbar>
    <ion-title>{{ selectedClass.name }}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <vg-player vg-responsive="true" vg-plays-inline="true" (onPlayerReady)="onPlayerReady($event)">
    <vg-overlay-play [vgFor]="singleVideo"></vg-overlay-play>
    <vg-buffering></vg-buffering>
    <vg-controls>
      <vg-time-display [vgFor]="singleVideo" [vgProperty]="'left'" [vgFormat]="'mm:ss'"></vg-time-display>

      <vg-scrub-bar [vgFor]="singleVideo">
            <!-- more components here -->
        </vg-scrub-bar>
    </vg-controls>

    <video [vgMedia]="media" #media 
      id="singleVideo" 
      preload="auto"
      type="video/mp4"
      webkit-playsinline
      playsinline>

      <source *ngFor="let video of sources" [src]="video.src" [type]="video.type">

    </video>
  </vg-player>
</ion-content>

Typescript

import { Component } from '@angular/core';
import { Content, NavController, NavParams } from 'ionic-angular';

import { VgAPI } from 'videogular2/core';
import { VgCoreModule } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';
import { VgBufferingModule } from 'videogular2/buffering';

@Component({
  selector: 'page-class-video',
  templateUrl: 'class_video.html'
})
export class ClassVideoPage {

  selectedClass: any;
  playlist: any;
  currentVideo: any = 0;
  currentVideoURL: any;
  totalVideos: any;
  classEnded: boolean = false;
  api: any;
  sources : Array<Object>;

  constructor() {

    this.selectedClass = navParams.get('class');
    this.playlist = this.selectedClass.videos;
    this.totalVideos = this.selectedClass.videos.length;

    this.sources = new Array<Object>();
    this.sources.push({
      src: this.selectedClass.videos[0].video_s3,
      type: "video/mp4"
    });
  }

  // Load API when video is ready
  onPlayerReady(api: VgAPI) {
    this.api = api;

    // Listen for end of video
    this.api.getDefaultMedia().subscriptions.ended.subscribe(() => {
      this.currentVideo++;
      if(this.currentVideo == this.totalVideos) {
        this.classEnded = true;
      } else {
        this.setCurrentVideo(this.playlist[this.currentVideo].video_s3);

        this.onPlayerReady(this.api);

        this.api.play(); // Rarely works as it fires before video has loaded
      }
    });

    // Play video automatically
    this.api.getDefaultMedia().subscriptions.canPlayThrough.subscribe(() => {
      this.api.play();
    });

    this.api.getDefaultMedia().subscriptions.loadedData.subscribe(() => {
      this.api.play();
    });
  }

  setCurrentVideo(source: string){
    this.sources = new Array<Object>();
    this.sources.push({
      src: source,
      type: "video/mp4"
    });
    this.api.getDefaultMedia().currentTime = 0;
    this.api.play();
  }

}

this.selectedClass.videos是一个视频对象数组。

我尝试绑定video标签上的src，而不是使用sources列表，但是得到了完全相同的行为。

- Mike

Answer 1

我解决了这个问题，不再使用API播放。相反，我使用本地的autoplay视频标签，该标签在加载后立即播放视频，这意味着我不需要尝试自己启动播放。

这样做时，vg-overlay-play功能按预期工作。

我不确定为什么api.play()会导致视频出现问题。几乎可以认为它被不断调用，因此任何对vg-overlay-play的按下都会立即被api.play()覆盖。 autoplay修复了这个问题：

<video [vgMedia]="media" #media 
  id="singleVideo" 
  preload="auto"
  type="video/mp4"
  webkit-playsinline
  playsinline
  autoplay>

  <source *ngFor="let video of sources" [src]="video.src" [type]="video.type">

</video>

- Mike