video source in Videogular2

Question

ビデオソースを更新して再生しようとしています。私は、Ionic 2（Angular 2）アプリ内でVideogular2を使用しています。

期待される動作

私は、ビデオソースを変更し、ロード時に再生を開始することが期待されます。

実際の行動

ビデオソースが正常に変更され、ポスター画像の変更（私はChromeデベロッパーツール/ DOMでこれを見ることができます）。ビデオは再生されません。私はvg-overlay-playを使用しています。クリック/タップしてもビデオは再生されません。ネイティブcontrolsをvideoに追加するようにコードを修正した場合、これらのコントロールを使用して手動でビデオを再生することができます。

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ビデオオブジェクトの配列です。

sourcesリストを使用する代わりに、videoタグのsrcにバインドしようとしましたが、まったく同じ動作をします。

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>