微信视频类H5 之自适应全屏

Posted 2020-09-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信视频类H5 之自适应全屏相关的知识，希望对你有一定的参考价值。

<!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

以上是关于微信视频类H5 之自适应全屏的主要内容，如果未能解决你的问题，请参考以下文章

H5.video在微信中禁止全屏播放视频和直播流