如何使用 videogular2 在 angular 中默认全屏制作视频?
How to make video by default in full screen in angular with videogular2?
我目前正在处理 angular 项目,制作一个观看视频的网站。我使用 Videogular 是一个开发视频应用程序的框架。我不知道如何默认全屏制作视频。
我的代码:
<vg-player (onPlayerReady)="onPlayerReady($event)" >
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
<vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
</vg-scrub-bar>
<vg-controls>
<vg-play-pause></vg-play-pause>
<vg-playback-button></vg-playback-button>
</vg-controls>
<h1>{{id}}</h1>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
<source src="assets/skill/skill_{{id}}.mp4" type="video/mp4">
</video>
</vg-player>
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {VgAPI} from 'videogular2/compiled/src/core/services/vg-api';
@Component({
selector: 'app-skill',
templateUrl: './skill.component.html',
styleUrls: ['./skill.component.css']
})
export class SkillComponent implements OnInit {
id: string;
constructor(private route: ActivatedRoute) {
route.params.subscribe(params => {
this.id = params['id'];
});
}
ngOnInit() {
}
onPlayerReady(vgAPI: VgAPI) {
vgAPI.play();
vgAPI.fsAPI.toggleFullscreen();
}
}
非常感谢!
http://www.videogular.com/tutorials/videogular-api/
我在 Videogular 的 API 文档中找到了触发全屏的方法:
toggleFullScreen(): Toggles between fullscreen and normal mode.
你试过了吗?
我目前正在处理 angular 项目,制作一个观看视频的网站。我使用 Videogular 是一个开发视频应用程序的框架。我不知道如何默认全屏制作视频。
我的代码:
<vg-player (onPlayerReady)="onPlayerReady($event)" >
<vg-overlay-play></vg-overlay-play>
<vg-buffering></vg-buffering>
<vg-scrub-bar>
<vg-scrub-bar-current-time></vg-scrub-bar-current-time>
<vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
</vg-scrub-bar>
<vg-controls>
<vg-play-pause></vg-play-pause>
<vg-playback-button></vg-playback-button>
</vg-controls>
<h1>{{id}}</h1>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
<source src="assets/skill/skill_{{id}}.mp4" type="video/mp4">
</video>
</vg-player>
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from '@angular/router';
import {VgAPI} from 'videogular2/compiled/src/core/services/vg-api';
@Component({
selector: 'app-skill',
templateUrl: './skill.component.html',
styleUrls: ['./skill.component.css']
})
export class SkillComponent implements OnInit {
id: string;
constructor(private route: ActivatedRoute) {
route.params.subscribe(params => {
this.id = params['id'];
});
}
ngOnInit() {
}
onPlayerReady(vgAPI: VgAPI) {
vgAPI.play();
vgAPI.fsAPI.toggleFullscreen();
}
}
非常感谢!
http://www.videogular.com/tutorials/videogular-api/
我在 Videogular 的 API 文档中找到了触发全屏的方法:
toggleFullScreen(): Toggles between fullscreen and normal mode.
你试过了吗?