单页面单视频全屏播放

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

复制代码
<!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 @   河在谈  阅读(190)  评论(0)  编辑  收藏  举报
编辑推荐：
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
阅读排行：
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
点击右上角即可分享
微信分享提示
SQL AI 助手