安卓微信视频全屏无播放条高度保持不变解决办法

安卓微信默认与使用X5同层对比图

<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no">
<body>
  <header id="header" class="header"></header>
  <video id="video" class="video" poster="img/bg.jpg" autoplay="false" src="http://flv2.bn.netease.com/videolib3/1707/31/UwslJ1623/HD/UwslJ1623-mobile.mp4" width="640" preload="auto" x-webkit-airplay="true" playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>
</body>

.video {
  position: absolute;
}
.fullscreen .video {
  width: 100%;
  height: 100%;
  object-position: center 128px;
}
.fullscreen .header {
  width: 100%;
  height: 128px;
  background: #373B3E;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

var player = document.getElementById('video');

player.addEventListener('x5videoenterfullscreen', function() {
  // 设为屏幕尺寸
  player.style.width = document.body.width + 'px';
  player.style.height = (document.body.height-128) + 'px';
  // 在body上添加样式类以控制全屏下的展示
  document.body.classList.add('fullscreen');
});

player.addEventListener('x5videoexitfullscreen', function() {
  player.style.width = player.style.height = '';
  document.body.classList.remove('fullscreen');
}, false);

安卓微信视频全屏 无播放条 高度保持不变解决办法

推荐阅读更多精彩内容

安卓微信视频全屏无播放条高度保持不变解决办法