我正在尝试更新视频源，然后播放它 . 我在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>

打字稿

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