更新Videogular2中的视频源

Question

我正在尝试更新视频源，然后播放它。我在Ionic2 (Angular 2)应用中使用Videogular2。

预期行为

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

实际行为

视频源更改成功(我可以在Chrome developer tools/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>

打字脚本

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列表，但得到了完全相同的行为。

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>