<vg-player> 元素外的 Videogular2 控件
Videogular2 control outside <vg-player> element
有没有办法在 <vg-player></vg-player>
元素之外使用控制器?
我正在尝试在 <vg-player>
之外制作一个全屏按钮,如下所示:
<vg-controls>
<vg-fullscreen></vg-fullscreen>
</vg-controls>
<vg-player>
<vg-controls>
<vg-fullscreen></vg-fullscreen>
</vg-controls>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" autoplay>
<source src="assets/videos/mov_bbb.mp4" type="video/mp4"/>
</video>
</vg-player>´
这是因为我希望这个按钮在另一个地方,而不是在视频之上。
上面的代码给出了以下错误:ERROR TypeError: Invalid event target
自己找到解决方案。
使用 videogular2 API。
<vg-player (onPlayerReady)="onPlayerReady($event)">
<video> <source srcs="myvideo"/></video
</vg-player>
fullscreen() {
this.vg.fsAPI.toggleFullscreen();
}
您可以像这样创建一个按钮:
<vg-player (onPlayerReady)="onPlayerReady($event)">
<video> <source srcs="myvideo"/></video
</vg-player>
<button type="button" (click)="fullscreen()"> Fullscreen </button>
<script>
function fullscreen(){
document.getElementsByTagName('video')[0].fullscreen();
}
</script>
有没有办法在 <vg-player></vg-player>
元素之外使用控制器?
我正在尝试在 <vg-player>
之外制作一个全屏按钮,如下所示:
<vg-controls>
<vg-fullscreen></vg-fullscreen>
</vg-controls>
<vg-player>
<vg-controls>
<vg-fullscreen></vg-fullscreen>
</vg-controls>
<video [vgMedia]="media" #media id="singleVideo" preload="auto" autoplay>
<source src="assets/videos/mov_bbb.mp4" type="video/mp4"/>
</video>
</vg-player>´
这是因为我希望这个按钮在另一个地方,而不是在视频之上。
上面的代码给出了以下错误:ERROR TypeError: Invalid event target
自己找到解决方案。
使用 videogular2 API。
<vg-player (onPlayerReady)="onPlayerReady($event)">
<video> <source srcs="myvideo"/></video
</vg-player>
fullscreen() {
this.vg.fsAPI.toggleFullscreen();
}
您可以像这样创建一个按钮:
<vg-player (onPlayerReady)="onPlayerReady($event)">
<video> <source srcs="myvideo"/></video
</vg-player>
<button type="button" (click)="fullscreen()"> Fullscreen </button>
<script>
function fullscreen(){
document.getElementsByTagName('video')[0].fullscreen();
}
</script>