更新 Videogular2 中的视频源

Question

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

预期行为

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

实际行为

视频源更改成功（我可以在 Chrome 开发人员 tools/DOM 中看到这一点）和海报图像更改。虽然视频不播放。我正在使用 vg-overlay-play，当 clicked/tapped 不播放视频时。如果我修改我的代码以在 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>

更新 Videogular2 中的视频源

Update video source in Videogular2

javascript

angular

typescript

video

videogular

预期行为

实际行为

HTML

打字稿