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

最新推荐文章于 2024-05-02 17:16:34 发布

weixin_30300523

最新推荐文章于 2024-05-02 17:16:34 发布

阅读量275

点赞数

原文链接：http://www.cnblogs.com/litterfour/p/7027812.html

版权

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

转载于:https://www.cnblogs.com/litterfour/p/7027812.html

weixin_30300523

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信视频类H5 之自适应全屏

<!DOCTYPE html><html><head> <title>微信视频全屏播放</title> <meta name="viewport" content="width=device-width,width=640, user-scalable=no" /> <...
复制链接

扫一扫