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

JavaScript012

video.js全屏bug&隐藏添加全屏按钮,第1张

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

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

经过查看video.js官网文档,检查播放器实例配置,无误,Google各种方案无果。

果断放弃video自带的全屏方案。

通过修改video标签旋转,按宽高比放大视频至设备屏幕宽高

此时可以实现全屏效果。

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

可以结合cordova插件 cordova-plugin-statusbar 插件实现。

【插件地址 传送门】

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

1.播放器外层容器定义动态样式,播放器本身增加动画

2.定义变量记录当前是否处于全模式

3.切换全屏方法

4.页面样式控制的相关计算属性

5.部分css样式

让html手机页面video横着全屏自动播放可以使用JS。具体操作如下:

1、在页面加载完成后 获取浏览器高度以及宽度。

2、再设置VIDEO元素高度宽度即可。

<script type="text/javascript">

function resizeBody() {

var bodyHeight = document.documentElement.clientHeight

$("#Flash1").height(bodyHeight + "px")

$("body").height(bodyHeight + "px")

}

$(function () {

resizeBody()

})

</script>

<body style=" width:100%height:100%" onresize="resizeBody()">