Question

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

statusBar.overlaysWebView(true);

我解释了代码的工作原理以及我希望它在这段代码中使用这样的注释来工作//使用FULLSCREEN工作*和// * 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;
    });


  }
}

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

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

1 个答案: