Mettre à jour la source vidéo dans Videogular2

Question

J'essaie de mettre à jour la source vidéo, puis de la lire. J'utilise Videogular2 dans une application Ionic 2 (Angular 2).

Comportement attendu

Je me attends à la source vidéo à modifier et lors du chargement commencer à jouer.

Comportement réel

La source vidéo change avec succès (je peux voir dans les outils de développement Chrome/DOM) et les changements d'image de l'affiche. La vidéo ne joue pas bien. J'utilise vg-overlay-play, qui lorsque cliqué/tapé ne joue pas la vidéo. Si je modifie mon code pour inclure controls natif sur video puis je peux obtenir la vidéo à jouer en utilisant manuellement ces contrôles.

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> 

Tapuscrit

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 est un tableau d'objets vidéo.

J'ai essayé de vous lier à src sur la balise video au lieu d'utiliser une liste sources, mais obtenez exactement le même comportement.

Answer 1

J'ai corrigé cela en n'utilisant pas l'API pour jouer du tout. Au lieu de cela, j'utilise la balise vidéo native autoplay, qui permet de lire la vidéo dès qu'elle se charge, ce qui signifie que je n'ai pas besoin d'essayer de lancer une lecture moi-même.

En faisant cela la fonctionnalité vg-overlay-play fonctionne comme prévu.

Je ne suis pas sûr pourquoi api.play() cause une telle douleur avec les vidéos. C'est presque comme si on l'appelait constamment, donc n'importe quelle pression de vg-overlay-play est immédiatement annulée par api.play().

autoplay fixe ce bien:

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