videogular2 设置下一个视频并自动播放

Question

我在 ionic 2 中使用 videogular-2 制作了简单的播放器。当我按下开始按钮时，第一个视频在结束事件后播放 X 次，我再次播放视频 X 次。例如 first.mp4 在我将在 videogular 视频源中设置下一个视频设置成功后播放 2 次，但下一个加载的视频不会自动播放。如果我按下播放按钮视频播放。

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

使用这条线设置下一个视频后

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

我尝试了this.api.play();，但他们给出了如下错误

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

Answer 1

我只是修复了以下我不知道是否正确的方式。

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

}