关于 angular:videogular2 设置下一个视频并自动播放

videogular2 set next video and play automatically

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

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<ion-content>

<ion-row>
<ion-col text-center>
First > Second > Third > Fourth > Fifth > Sixth > Seventh
</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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67

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

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

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

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

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

相关讨论

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

html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<ion-row>
<ion-col text-center>
First > Second > Third > Fourth > Fifth > Sixth > Seventh
</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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

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

}