angularvideovideogular2

How to make video by default in full screen in angular with videogular2?


I'm currently working with angular project, making a website for watching video. I use Videogular is a framework to develop video apps. I don't know how to make video by default in full screen.

My code:

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

Thank you so much!


Solution

  • http://www.videogular.com/tutorials/videogular-api/

    I found a method in the Videogular’s API documentation that trigger fullscreen:

    toggleFullScreen(): Toggles between fullscreen and normal mode.

    Have you tried yet ?