安卓微信默认与使用X5同层对比图
Demo： 点此查看
原文链接： 点此查看
<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);
网友评论