单页面单视频全屏播放

在实际当中经常有这样的需要，要求把一个大的视频在线看，微信又发不过去，只能做一个兼容微信和电脑的页面，点开就能看，也方便分享。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title>单视频播放页面</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        html , body{
            width: 100%;
            height: 100%;
            background-color: #000;
        }
        #box{
            width: 100%;
            height: 100%;
            position: relative;
        }
        #box video{
            margin: 0 auto;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="box">
        <video id="video" style="width: 100%" controls x5-playsinline webkit-playsinline playsinline x-webkit-airplay autoplay loop>
            <source src="视频文件路径.mp4" type="video/mp4">
        </video>
    </div>
<script type="text/javascript">
    var v = document.getElementById('video');
    var b = document.getElementById('box');
    var w = window.innerWidth;
    var h = window.innerHeight;
    if(w>h){
        v.style.maxHeight = h+"px";
        v.style.height = h+"px";
    }else{
        v.style.maxWidth = w+"px";
        v.style.Width = w+"px";
        //竖屏
        v.style.marginTop = (h-v.scrollHeight)/2-40+"px"
    }
</script>
</body>
</html>

 

posted @ 2020-11-07 11:47  河在谈  阅读(179)  评论(0)  编辑  收藏  举报