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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了有关videojs的StatusBar问题在离子2中的全屏相关的知识,希望对你有一定的参考价值。

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

以上是关于有关videojs的StatusBar问题在离子2中的全屏的主要内容,如果未能解决你的问题,请参考以下文章

离子状态栏白底白字

VideoJS:有关支持的视频格式及其浏览器和平台兼容性的最新信息在哪里?

离子状态栏问题 IOS

通知未显示在我的设备离子3中

从 videoJS 显示视频时长

张高兴的 UWP 开发笔记:手机状态栏 StatusBar