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