微信非全屏播放设置（仅Iphone）

由于微信X5内核强制视频全屏，用X5自带内核播放，一般内嵌视频打开播放就会被全屏。

ihpone里面可以通过设置 x-webkit-airplay="true" webkit-playsinline="true" playsinline="true" 这些属性在video标签上面达到不全屏效果，安卓则不行。

 

 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=640,minimum-scale=0,maximum-scale=5,user-scalable=no"/>
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>测试新增非全屏属性是否影响视频播放</title>
    <script>
        if(navigator.appVersion.indexOf('Android') != -1){
            document.addEventListener("DOMContentLoaded",function(e){
                document.getElementsByTagName('body')[0].style.zoom = e.target.activeElement.clientWidth/640;
            });
        };
    </script>
    <style type="text/css">
    body{font-size: 21px;}
    p{padding: 0 20px; line-height: 30px;}
    .button{width: 150px; height: 40px; margin: 50px; text-align: center; border-radius: 5px; background: #f66; color: #fff; line-height: 40px;}
    </style>
</head>

<body>
    <div id="btn" class="button">点击播放视频</div>
    <div>
        <p>1.测试安卓和ihpone里面(微信和手机自带浏览器浏览图)视频是否都能播放</p>
        <p>2.测试安卓和ihpone里面(微信和手机自带浏览器浏览图)视频是否上下垂直居中播放（安卓微信、qq等X5内核浏览器，会自动全屏，能正常播放就行）</p>
        <p>3.是否发现其他影响观看的情况</p>
    </div>
    <div>
        <p>测试增加非全屏播放属性，是否影响视频播放</p>
        <p>x-webkit-airplay="true" webkit-playsinline="true" playsinline="true"</p>
     </div>
    <div id="vbox" style="display:none; position: fixed; z-index: 999999; left: 0px; right: 0px; top: 0px; bottom: 0px; background: rgba(0, 0, 0, 0.74902);"><video x-webkit-airplay="true" webkit-playsinline="true" playsinline="true"  id="vv" src="" style="position: absolute; width: 100%; left: 0px; right: 0px; top: 50%; height: 360px; margin-top: -180px;"></video></div>
    <script type="text/javascript">
        var video = document.getElementById('vv');
        var vobx = document.getElementById('vbox');
        var btn = document.getElementById('btn');
        function showVideo(){
            vobx.style.display="block";
            video.src="https://tx3.v.netease.com/2017/0104/ae91b59d76d346d77aa284efaf87528fqt.mp4"
            video.load();
            video.play();
        }
        function hideVideo(){
            video.pause();
            //video.src="https://tx3.v.netease.com/2017/0104/ae91b59d76d346d77aa284efaf87528fqt.mp4";
            //video.load();
            vobx.style.display="none";
        }
        video.addEventListener("click",function(){
            if(this.paused){
                this.play();
            }else{
                this.pause();
            }
            console.log(event)
            event.stopImmediatePropagation();//阻止冒泡
        })
        vobx.addEventListener("click",hideVideo);
        btn.addEventListener("click",showVideo,false);
    </script>
</body>
</html>

 

posted on 2017-03-15 12:05  靖儿  阅读(761)  评论(0)  编辑  收藏  举报

导航