video.js全屏bug&隐藏/添加全屏按钮

问题

最近项目中接入video.js框架，在安卓机上全屏时，有声音无画面。

问题分析

通过调试，发现在全屏后，video标签 width & height 均为0，

• 手动修改宽高，仍旧无画面。
• 通过伪类 :full-screen修改宽高， video标签宽高生效了，但是仍旧无画面。

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

经过查看video.js官网文档，检查播放器实例配置，无误，Google各种方案无果。
果断放弃video自带的全屏方案。
通过修改video标签旋转，按宽高比放大视频至设备屏幕宽高

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

隐藏原有全屏按钮

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

手动添加全屏按钮 并绑定开关全屏方法toggleFullScreen

    // 手动添加全屏按钮
    $(".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>');

自定义开关全屏方法

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

此时可以实现全屏效果。

但是问题又出现了，手机的20px的状态条仍旧在 =_=#

当前目标： 隐藏掉20px状态条

可以结合cordova插件 cordova-plugin-statusbar 插件实现。
【插件地址 传送门】

main.js中添加如下代码

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

  StatusBar.hide();

},alse）

至此，曲线救国，问题修复。

转载于:https://www.jianshu.com/p/a85bf8562f50