StatusBar issue with videojs Fullscreen

Ionic Framework ionic-v3
1

I use a Component to run videos js in an ionic application
I want the application to cover the status bar when click fullscreen in the video
This code works only when i put in ‘constructor’, put when i put inside the fullscreen handle function it does not work.

    statusBar.overlaysWebView(true);

I explained the code where it works and where i want it to work in this code using comments like this //* FULLSCREEN WORKS THERE * and //* FULLSCREEN Does Not WORK THERE *

    import {Component,OnInit,OnDestroy,ElementRef,Input} from '@angular/core';
    import videojs from 'video.js';
    import 'videojs-contrib-hls';
    import { StatusBar } from '@ionic-native/status-bar';
    import { Platform } from 'ionic-angular';
    @Component({
        selector: 'videojs',
        template: '<video *ngIf="url" id="video_{{idx}}" class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9" controls autoplay preload="auto" [poster]="poster" width="640" height="264"><source [src]="url" type="application/x-mpegURL" /></video>',
    })

    export class VideoJSComponent implements OnInit, OnDestroy {
        @Input() idx: string;
        @Input() url: any;
        @Input() poster: any;
        private player: any; 
        
        constructor(elementRef: ElementRef, platform: Platform, private statusBar: StatusBar) {
            this.url = false;
            this.player = false;
            //statusBar.overlaysWebView(true); //* FULLSCREEN WORKS THERE *
        }
        ngOnInit() { }
        ngOnDestroy() { }
        ngAfterViewInit() {
        let el = 'video_' + this.idx;
        this.player = videojs(document.getElementById(el), {"html5": {
            "hls": {
                "withCredentials": true,
            }, 
        },
        "techOrder": ["html5"],
        resolve: {
        alias: {
            'video.js$': 'video.js/dist/video.cjs.js',
            'videojs-contrib-hls': 'videojs-contrib-hls/dist/videojs-contrib-hls',
        },
    }
    }, function() {
      
        var myPlayer = this, id = myPlayer.id();
      
        // Handle fullscreen
        myPlayer.on('fullscreenchange',function() {
            if( myPlayer.isFullscreen() == true) {
                console.log(myPlayer.isFullscreen());
                document.body.classList.add("vjsFull");
                //statusBar.overlaysWebView(true); //* FULLSCREEN Does Not WORK THERE *
                //this.statusBar.overlaysWebView(true); //* FULLSCREEN Does Not WORK THERE *
            }else {
                document.body.classList.remove("vjsFull");
            }
        });
      
        // Make up an aspect ratio
        var aspectRatio = 264/640;
      
        // internal method to handle a window resize event to adjust the video player
        function resizeVideoJS(){
            var width = document.getElementById(id).parentElement.offsetWidth;
            myPlayer.width(width);
            myPlayer.height( width * aspectRatio );
        }
        resizeVideoJS();
        window.onresize = resizeVideoJS;
        });


      }
    }
2

I recommend everyone to try Videogular 2 to get a stable, customizable video player.

3

I use videojs for live streaming, Do you know if Videogular 2 support live streaming?

4

the solution for who face the same issue
define this to another variable before the fullscreen function

var _this = this;

then use in in the fullscreen function like this

_this.statusBar.hide();

    export class VideoJSComponent implements OnInit, OnDestroy {

      ...

      ngAfterViewInit() {
          var _this = this;
          this.player = videojs(document.getElementById(el), {

              ...

          }, function() {
              // Handle fullscreen
              myPlayer.on('fullscreenchange', function() {
                  if (myPlayer.isFullscreen() == true) {
                      ...
                      _this.statusBar.hide();
                  }
                  else {
                      ...
                      _this.statusBar.show();
                  }
              });
          });
      }
    }
5

it plays video from a url so if you stream your new video through a specific url, yes… but I’m not 100% sure.
It plays local videos very well.

7

you should use es6 arrow function.