video.js fullscreen bug & Hide / add full-screen button

problem

Recent projects access video.jsframe, Andrews Machine on full screen when there is no sound picture .

problem analysis

By debugging, found in the full-screen, video label width & height are 0,

• Manually modify the width and height, without still picture.
• By pseudo-class :full-screento modify the width and height, video tag width and height in force, but still no screen.

#my-player:-webkit-full-screen    { width: 100%; height: 100%; z-index: 2019;}
#my-player:-moz-full-screen       { width: 100%; height: 100%;  z-index: 2019;}
#my-player:-ms-full-screen        { width: 100%; height: 100%;  z-index: 2019;}
#my-player:-o-full-screen         { width: 100%; height: 100%;  z-index: 2019;}
#my-player:full-screen            { width: 100%; height: 100%;  z-index: 2019;}

After viewing video.js official website document, check the player instance configuration is correct, Google programs no avail.
Determined to give up full-screen video that comes with the program.
By modifying the video tag rotation, zoom-in video to the aspect ratio of the device according to the aspect of the screen

var player = videojs("my-player", {
     sources: [{
         src: videoUrl,
         type: "video/mp4"
      }]
  });

Hide original full-screen button

    // 隐藏原有全屏按钮
    $(".vjs-fullscreen-control.vjs-control.vjs-button").css("display","none");

Add full-screen button to manually switch the full screen and binding methodtoggleFullScreen

    // 手动添加全屏按钮
    $(".vjs-control-bar").append('<button class="vjs-fullscreen-control vjs-control vjs-button" type="button" title="Fullscreen" aria-disabled="false" id="danmu_send_opt" onclick="toggleFullScreen()"><span aria-hidden="true" class="vjs-icon-placeholder"></span></button>');

Custom switching method fullscreen

var isFullScreen = false;
function toggleFullScreen() {
    var video = document.querySelector("#my-player");
    isFullScreen = !isFullScreen;
    const screen_w = window.screen.width;
    const screen_h = window.screen.height; 
    if(isFullScreen) {
        $("#header").css("display","none");
        video.setAttribute("style", 
        "transform:rotate(90deg);"+
        "width:"+ screen_w +'px;'+ 
        "height:"+ screen_w +'px;'+ 
        "postion:absolute;"+
        "top:"+ ((screen_h - screen_w)/2 - 10) +'px;'+ 
        "left:-"+ ((screen_h - screen_w) /2 - 10) +"px;"+
        "z-index:2018;");
    } else {
        $("#header").css("display","block");
         video.setAttribute("style", 
        "transform:rotate(0deg);"+
        "width:"+screen_w+ 'px;'+
        "height:150px;"+
        "postion:absolute;"+
        "top:0;"+
        "left:0;"+
        "right:0;");
    }       
}

At this point it can achieve full-screen effect.

But the problem has emerged, phone 20px is 状态条still at # = _ =

Current goal: 20px hide the status bar

It can be combined cordova plug cordova-plugin-statusbarplug-in implementation.
[Plug-in] Address Portal

main.js中添加如下代码

document.addEventListener('deviceready', function() {

  StatusBar.hide();

},alse）

So far, Quxianjiuguo, bug fixes.

Reproduced in: https: //www.jianshu.com/p/a85bf8562f50