最近项目中接入 video.js 框架，在安卓机上 全屏 时， 有声音无画面 。
通过调试，发现在全屏后，video标签 width &height 均为0，
经过查看video.js官网文档，检查播放器实例配置，无误，Google各种方案无果。
果断放弃video自带的全屏方案。
通过修改video标签旋转，按宽高比放大视频至设备屏幕宽高
此时可以实现全屏效果。
但是问题又出现了，手机的20px的 状态条 仍旧在 =_=#
可以结合cordova插件 cordova-plugin-statusbar 插件实现。
【插件地址 传送门】
至此，曲线救国，问题修复。
1.播放器外层容器定义动态样式，播放器本身增加动画
2.定义变量记录当前是否处于全模式
3.切换全屏方法
4.页面样式控制的相关计算属性
5.部分css样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<script language="javascript">
function vopen(){
var num = 0
var vkai = document.getElementById("kai")
var vguan = document.getElementById("guan")
var vdiv = document.getElementById("video")
vdiv.style.display="block"
vkai.style.display="none"
vguan.style.display="block"
document.getElementById("MediaPlayer").controls.play()
document.getElementById("MediaPlayer").ShowControls = -1
document.getElementById("xianshi").style.display = "block"
}
function dofull(){
document.getElementById("MediaPlayer").fullScreen = 1
vopen()
}
function vclose(){
var vkai = document.getElementById("kai")
var vguan = document.getElementById("guan")
var vdiv = document.getElementById("video")
vdiv.style.display="none"
vkai.style.display="block"
vguan.style.display="none"
document.getElementById("MediaPlayer").controls.stop()
document.getElementById("xianshi").style.display = "none"
}
</script>
<title>无标题文档</title>
</head>
<body>
<div class="container">
<div class="vleft">
<div id="video" style="display:none">
<object id="MediaPlayer" class="vplayer" width="600px" height="560px" classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6">
<param name="URL" value="video.wmv">
<param name="autoStart" value="0">
<param name="ShowControls" value="-1">
<param name="PlayCount" value="10000000">
<param name="ShowPositionControls" value="-1">
<param name="ShowAudioControls" value="-1">
<param name="uiMode" value="none">
<param name="ShowTracker" value="-1">
<param name="ShowDisplay" value="-1">
<param name="ShowStatusBar" value="-1">
<param name="enabled" value="-1">
<param name="SendMouseClickEvents" value="1">
<param name="SendMouseMoveEvents" value="1">
<param name="DisplaySize" value="0">
</object>
</div>
</div>
<div class="vright">
<div class="xpage"><a href="javascript:window.history.go(-1)" target="_self"><img src="images/X2.png" /></a></div>
<div class="rightpic"></div>
<div class="vbut" id="kai" onclick="vopen()" style="cursor:hand">点击看视频</div>
<div class="vbut" id="xianshi" onclick="dofull()" style="cursor:handdisplay:none">点击全屏</div>
<div class="vbut" id="guan" onclick="vclose()" style="cursor:handdisplay:none">关闭视频</div>
<div class="vbut" id="back" onclick="javascript:window.history.go(-1)" style="cursor:hand">返回</div>
</div>
</div>
</body>
</html>
你要的是这样的效果么?
满意要给分哦,老大
