更新视频图像2中的视频源
问题描述:
我试图更新视频源,然后播放它。我在Ionic 2(Angular 2)应用程序中使用Videogular2。更新视频图像2中的视频源
预期的行为
我希望将视频源进行更改,并在加载时开始播放。
实际行为
视频源成功地改变和海报图像的变化(我可以在Chrome开发者工具/ DOM看到这个)。视频虽然不播放。我使用的是vg-overlay-play
,点击/点按时不播放视频。如果我修改我的代码在video
上包含原生controls
,那么我可以通过手动使用这些控件来播放视频。
<ion-header>
<ion-navbar>
<ion-title>{{ selectedClass.name }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<vg-player vg-responsive="true" vg-plays-inline="true" (onPlayerReady)="onPlayerReady($event)">
<vg-overlay-play [vgFor]="singleVideo"></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-controls>
<vg-time-display [vgFor]="singleVideo" [vgProperty]="'left'" [vgFormat]="'mm:ss'"></vg-time-display>
<vg-scrub-bar [vgFor]="singleVideo">
<!-- more components here -->
</vg-scrub-bar>
</vg-controls>
<video [vgMedia]="media" #media
id="singleVideo"
preload="auto"
type="video/mp4"
webkit-playsinline
playsinline>
<source *ngFor="let video of sources" [src]="video.src" [type]="video.type">
</video>
</vg-player>
</ion-content>
打字原稿
import { Component } from '@angular/core';
import { Content, NavController, NavParams } from 'ionic-angular';
import { VgAPI } from 'videogular2/core';
import { VgCoreModule } from 'videogular2/core';
import { VgControlsModule } from 'videogular2/controls';
import { VgOverlayPlayModule } from 'videogular2/overlay-play';
import { VgBufferingModule } from 'videogular2/buffering';
@Component({
selector: 'page-class-video',
templateUrl: 'class_video.html'
})
export class ClassVideoPage {
selectedClass: any;
playlist: any;
currentVideo: any = 0;
currentVideoURL: any;
totalVideos: any;
classEnded: boolean = false;
api: any;
sources : Array<Object>;
constructor() {
this.selectedClass = navParams.get('class');
this.playlist = this.selectedClass.videos;
this.totalVideos = this.selectedClass.videos.length;
this.sources = new Array<Object>();
this.sources.push({
src: this.selectedClass.videos[0].video_s3,
type: "video/mp4"
});
}
// Load API when video is ready
onPlayerReady(api: VgAPI) {
this.api = api;
// Listen for end of video
this.api.getDefaultMedia().subscriptions.ended.subscribe(() => {
this.currentVideo++;
if(this.currentVideo == this.totalVideos) {
this.classEnded = true;
} else {
this.setCurrentVideo(this.playlist[this.currentVideo].video_s3);
this.onPlayerReady(this.api);
this.api.play(); // Rarely works as it fires before video has loaded
}
});
// Play video automatically
this.api.getDefaultMedia().subscriptions.canPlayThrough.subscribe(() => {
this.api.play();
});
this.api.getDefaultMedia().subscriptions.loadedData.subscribe(() => {
this.api.play();
});
}
setCurrentVideo(source: string){
this.sources = new Array<Object>();
this.sources.push({
src: source,
type: "video/mp4"
});
this.api.getDefaultMedia().currentTime = 0;
this.api.play();
}
}
this.selectedClass.videos
是视频对象的数组。
我试过绑定到标记上的src
而不是使用sources
列表,但得到完全相同的行为。
答
我解决这个问题的方式是不使用API来玩游戏。相反,我使用的是原生autoplay
视频标签,该标签在加载后立即播放视频,这意味着我无需尝试自己开始播放。
这样做时,vg-overlay-play
功能按预期工作。
我不确定为什么api.play()
对视频造成这样的痛苦。它几乎就像它不断被呼叫,所以vg-overlay-play
的任何新闻被立即推翻api.play()
。
autoplay
固定这虽然:
<video [vgMedia]="media" #media
id="singleVideo"
preload="auto"
type="video/mp4"
webkit-playsinline
playsinline
autoplay>
<source *ngFor="let video of sources" [src]="video.src" [type]="video.type">
</video>