有关videojs的StatusBar问题在离子2中的全屏

Posted 2021-04-21

我使用Component在离子应用程序中运行视频js 我希望应用程序在视频中单击全屏时覆盖状态栏 这个代码只有在我输入'constructor'时才会起作用，当我放入全屏句柄功能时它就不起作用了。

statusBar.overlaysWebView(true);

我解释了代码的工作原理以及我希望它在这段代码中使用这样的注释// * FULLSCREEN WORKS THERE *和// * FULLSCREEN在那里不起作用*

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


  }
}

答案

面对同一问题的解决方案在全屏功能之前将此定义为另一个变量

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