videogular2 set next video and play automatically

Question

I made simple player in ionic 2 with videogular-2. When i press start button first video is playing X number of time after getting end event i play video again for X time. For example first.mp4 is playing 2 time after i will set next video in source of videogular video is set successfully but next loaded video is not playing automatically. If i press play button video plays.

html

<ion-content>

    <ion-row>
        <ion-col text-center>
            <h3>First > Second > Third > Fourth > Fifth > Sixth > Seventh</h3>
        </ion-col>
    </ion-row>

    <ion-row>
        <ion-col col-sm-1 col-md-1 col-lg-1 col-xl-1>
        {{duration}}
        </ion-col>
        <ion-col col-sm-11 col-md-11 col-lg-11 col-xl-11>
            <button ion-button (click)="playVideo()" [hidden]="isPlaying">Start Workout</button>

            <vg-player (onPlayerReady)="onPlayerReady($event)" [hidden]="!isPlaying">
                <vg-overlay-play></vg-overlay-play>
                <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
                    <source *ngFor="let video of sources" [src]="video.src" [type]="video.type">
                </video>
            </vg-player>
        </ion-col>

    </ion-row>
</ion-content>

ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { VgAPI } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';
import { VgBufferingModule } from 'videogular2/buffering';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage 
{
    isPlaying : any;
    duration : any;
    sources : Array<Object>;
    api:VgAPI;
    constructor(public navCtrl: NavController) 
    {
        this.isPlaying = false;

        this.sources = new Array<Object>();
        this.sources.push({
          src: "small.mp4",
          type: "video/mp4"
        });

        //this.setCurrentVideo("small.mp4","video/mp4");
    }
    setCurrentVideo(source : string, type : string) 
    {
        this.sources = new Array<Object>();
        this.sources.push({
          src: source,
          type: type
        });
        this.api.getDefaultMedia().currentTime = 0;
    }
    onPlayerReady(api:VgAPI) 
    {
        var x = 1;
        this.api = api;

        this.api.getDefaultMedia().subscriptions.ended.subscribe(
            () => 
            {
                x++;
                if(x>2)
                {
                    this.setCurrentVideo("SampleVideo_1280x720_2mb.mp4","video/mp4");
                    x = 2;
                }
                else
                {
                    this.api.play();
                }
            }
        );

    }
    playVideo()
    {
        this.isPlaying = true;
        this.api.play();
        this.duration = Math.ceil((this.api.duration * 5));
    }   
}

After setting next video using this line

this.setCurrentVideo("SampleVideo_1280x720_2mb.mp4","video/mp4");

i tried this.api.play(); but they give error like below

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause().

Answer 1

I just fix that following way i dont known that is proper or not.

html

<ion-row>
    <ion-col text-center>
        <h3>First > Second > Third > Fourth > Fifth > Sixth > Seventh</h3>
    </ion-col>
</ion-row>

<ion-row>
    <ion-col col-sm-1 col-md-1 col-lg-1 col-xl-1>
    {{duration}}
    </ion-col>
    <ion-col col-sm-11 col-md-11 col-lg-11 col-xl-11>
        <button ion-button (click)="playVideo()" id="myButton" [hidden]="isPlaying">Start Workout</button>

        <vg-player (onPlayerReady)="onPlayerReady($event)" [hidden]="!isPlaying">
            <vg-overlay-play></vg-overlay-play>
            <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
                <source *ngFor="let video of sources" [src]="video.src" [type]="video.type">
            </video>
        </vg-player>
    </ion-col>

</ion-row>

js

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { VgAPI } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';
import { VgBufferingModule } from 'videogular2/buffering';
import * as $ from 'jquery'

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})
export class HomePage 
{
    isPlaying : any;
    duration : any;
    sources : Array<Object>;
    api:VgAPI;
    constructor(public navCtrl: NavController) 
    {
        this.isPlaying = false;

        this.sources = new Array<Object>();
        this.sources.push({
          src: "small.mp4",
          type: "video/mp4"
        });

        //this.setCurrentVideo("small.mp4","video/mp4");
    }
    setCurrentVideo(source : string, type : string) 
    {
        this.sources = new Array<Object>();
        this.sources.push({
          src: source,
          type: type
        });
        this.api.getDefaultMedia().currentTime = 0;
    }
    onPlayerReady(api:VgAPI) 
    {
        var x = 1;
        this.api = api;

        this.api.getDefaultMedia().subscriptions.ended.subscribe(
            () => 
            {
                x++;
                if(x>2)
                {
                    this.setCurrentVideo("SampleVideo_1280x720_2mb.mp4","video/mp4");

                    this.onPlayerReady(this.api);

                    setTimeout(function () 
                    {
                        $("#myButton").trigger( "click" );    
                    },1000);


                    x = 0;
                }
                else
                {
                    this.api.play();
                }
            }
        );

    }
    playVideo()
    {
        this.isPlaying = true;
        this.api.play();
        this.duration = Math.ceil((this.api.duration * 5));
    }

}