移动端适配video适配 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频适配移动端</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <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">
    <meta content="email=no" name="format-detection">
    <style type="text/css">
    body{ max-width: 
    640px; margin:0 auto; }
    </style>
</head>
<body>
<div style="padding:56% 0 0;position: relative;margin:0;background-color: #000;">
    <video style="position: absolute;height: 100%;width: 100%;top:0;left:0;" src="http://img.fuyuandian.com/kaiguang2.mp4" controls="controls"></video>
</div>
    
</body>
</html>

 

posted @ 2017-12-29 10:54  前端HL  阅读(454)  评论(0)    收藏  举报