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

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

Demo： 点此查看
原文链接： 点此查看

.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);