HTML Video element Fullscreen

Question

Is there a way in Angular 2 to make a video fullscreen once pressing a button?

This is the function I tried so far. (Note that pausing and playing works fine.)

fullscreen(video){
        video.requestFullscreen();
    }

HTML code

<video #video autoplay>
  <source src="assets/videos/mov_bbb.mp4" type="video/mp4">
   <img alt = "Test image" src="/assets/images/example.png" title="Your browser does not support the <video> tag">
   </video>
<button (click)="fullscreen(video);"> Fullscreen </button>

Possible duplicate of [Html5 Full screen video](https://stackoverflow.com/questions/6039909/html5-full-screen-video) — , Nov 09 '17 at 14:28
Possible duplicate of [this topic](https://stackoverflow.com/questions/6039909/html5-full-screen-video). You just need to adapt the solution to Angular, with a ViewChild. Do you know how to do that ? — , Nov 09 '17 at 14:29

score 1 · Answer 1 · answered Nov 09 '17 at 14:33

1

Following my comment, what you can do (and following this already answered topic) is something like this

@ViewChild('video') video: ElementRef;

toFullScreen() {
  let elem = this.video.nativeElement as HTMLVideoElement;
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  }
}

answered Nov 09 '17 at 14:33

Where do I put @ViewChild('video') video: ElementRef;? also mozRequestFullScreen(); gives an error – Fig Nov 09 '17 at 14:38
You put it before the contrsuctor of your class, where you define your variables. And for the error, you will have to either deal with it, or post the stacktrace in your post so that I can help ! – Nov 09 '17 at 14:39

score 1 · Answer 2 · answered Nov 09 '17 at 14:41

Browsers have not yet broadly adopted support for the fullScreen API. So although your code looks ok, it won't behave as expected in some situations.

If this feature is important to your app I suggest using the FScreen polyfill, which is recommended by Mozilla.

NPM install fscreen
Import it into your component
Modify your fullScreen() method to use it:

_

fullscreen(video){
  if(fscreen.fullscreenEnabled) {
      fscreen.requestFullscreen(video);
  } else {console.error('fullscreen is not supported');}
}

If you don't want to introduce a 3rd-party dependency, you may need to use the various prefixes that browsers expect. See the docs or adapt @trichetriche's answer

HTML Video element Fullscreen

2 Answers2