1

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().
Paresh Gami
  • 4,777
  • 5
  • 23
  • 41
  • 1
    Can you try this demo on a mobile? https://videogular.github.io/videogular2-showroom/#/smart-playlist I think that you can't autoplay on some mobile devices, that depends on the OS. Since iOS10 you can autoplay only if you set mute attribute and playsinline. You have more info here: https://webkit.org/blog/6784/new-video-policies-for-ios/ – elecash Jun 01 '17 at 10:34
  • @elecash Thanks for your answer i will try and let you know about that. – Paresh Gami Jun 01 '17 at 10:50
  • @elecash Thanks that is working fine but issue is when we switch between 2 videos display big play button any solution of that? – Paresh Gami Jun 02 '17 at 11:50
  • 1
    I think that you need to hide it through css https://stackoverflow.com/questions/8911247/hide-iphone-html5-video-play-button – elecash Jun 02 '17 at 15:01
  • @elecash i can hide it using css? wow amazing..! Thanks you so much for your help. – Paresh Gami Jun 02 '17 at 15:10

1 Answers1

0

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));
    }

}
Paresh Gami
  • 4,777
  • 5
  • 23
  • 41