Videoquelle in Videogular2 aktualisieren

Question

Ich versuche, die Videoquelle zu aktualisieren und dann abzuspielen. Ich verwende Videogular2 innerhalb einer Ionic 2 (Angular 2) App.

erwartetes Verhalten

Ich würde die Videoquelle erwartet geändert werden und nach dem Laden anfangen zu spielen.

tatsächliches Verhalten

Das Quellvideo ändert erfolgreich (ich kann das sehen, in Chrome-Entwickler-Tool/DOM) und Änderungen Plakatbild. Das Video wird nicht abgespielt. Ich benutze vg-overlay-play, die beim Klicken/Tippen nicht das Video wiedergeben. Wenn ich meinen Code nativ um controls auf video schließe, kann ich das Video abspielen, indem ich diese Steuerelemente manuell benutze.

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> 

Typoskript

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 ist ein Array von Videoobjekten.

Ich habe versucht, an src auf dem video Tag zu binden, anstatt eine sources Liste zu verwenden, aber das genau gleiche Verhalten zu erhalten.

Answer 1

Ich reparierte dies, indem ich die API überhaupt nicht zum Spielen verwendete. Stattdessen benutze ich den nativen Video-Tag autoplay, der das Video abspielen lässt, sobald es geladen wird, was bedeutet, dass ich nicht selbst versuchen muss, ein Spiel zu starten.

Wenn Sie dies tun, funktioniert die vg-overlay-play Funktionalität wie erwartet.

Ich bin mir nicht sicher, warum api.play() solche Schmerzen mit den Videos verursacht. Es ist fast so, als ob es ständig angerufen wird, also wird jedes Drücken von vg-overlay-play sofort von api.play() annulliert.

autoplay dies aber behoben:

<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>