<!DOCTYPE html>
<html>
<head>
<title>微信视频全屏播放</title>
<meta name="viewport" content="width=device-width,width=640, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta http-equiv="x-ua-compatible" content="IE=edge" />
<style>
html, body, div,video{ margin: 0; padding: 0; }
body { overflow:hidden; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#fff; }
.main{ max-width: 640px; height: 100%; position: absolute; left: 0; right: 0; margin: auto; }
.video-box video { position: absolute; z-index: 10; }
</style>
</head>
<body code="no">
<div class="main">
<div class="video-box" id="video-box">
<video id="boxv" class="action" poster="http://go.163.com/2017/0608/haier/images/poster.jpg?1111" src="http://flv.bn.netease.com/videolib3/1706/11/ERBAg5602/SD/ERBAg5602-mobile.mp4" x-webkit-airplay="true" playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" webkit-playsinline playsinline x-webkit-airplay="true"></video>
</div>
</div>
</body>
</html>
<script src="http://go.163.com/2015/maning/html/common/jq/jquery-2.1.3.min.js"></script>
<script>
function eResize(e,posi){
var cw = 640,
ch = document.documentElement.clientHeight,
vScale, vwScale, vhScale;
vwScale = cw / 640, vhScale = ch / 1040;
vScale = vwScale > vhScale ? vwScale : vhScale;
$(e).css({
‘-webkit-transform‘: ‘scale(‘ + vScale + ‘)‘,
‘-webkit-transform-origin‘: posi
});
}
eResize(‘.video-box‘,‘center center‘);
//eResize(‘.page-box‘,‘center 72%‘);
$(window).bind("resize",function(){
//alert()
eResize(‘.video-box‘,‘center center‘);
// eResize(‘.page-box‘,‘center 72%‘);
});
$(‘.masker‘).show();
$(‘.masker‘).click(function(){
$(‘#boxv‘)[0].play();
setTimeout(function(){
$(‘.masker‘).hide();
},500);
});
</script>
案例地址：
http://www.epub360.com/portfolio/20!0!0!0!2!!!/
https://www.h6app.com