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

Question

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

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

}

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

videogular2 set next video and play automatically

videogular

ionic2

angular

html

ts

html

js