ionic 2中videojs全屏的StatusBar问题

Question

我在离子应用程序中使用组件运行视频 js
我想让应用程序在点击视频全屏时覆盖状态栏
此代码仅在我放入 'constructor' 时有效，当我放入全屏句柄函数时它不起作用。

statusBar.overlaysWebView(true);

我使用像这样的注释解释了代码在哪里工作以及我希望它在这段代码中工作的地方 //* FULLSCREEN WORKS THERE * 和 //* 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;
    });


  }
}

Answer 1

遇到相同问题的解决方案在全屏功能之前将其定义为另一个变量

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

ionic 2中videojs全屏的StatusBar问题

StatusBar issue with videojs Fullscreen in ionic 2

video.js

ionic2

ionic3

angular