1.前言：移动端可以播放MP4文件格式，HTML5的video标签实现了播放器。但是在移动端上初始化显示界面不好看，所以，这里将video包装起来，界面至少不丑。
<!doctype html>
<html lang="en"><head><title>乐在工作</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Document</title><!--导入css--><link rel="stylesheet" href="../css/bootstrap.min.css" /><!--导入jquery.js--><!--导入popper.js--><script type="text/javascript" src="../js/popper.min.js"> </script><script type="text/javascript" src="../js/jquery.min.js"> </script><!--导入bootstrap.js--><script type="text/javascript" src="../js/bootstrap.min.js"></script><style>.img1{ background:transparent url('../img/1.jpg') 50% 50% no-repeat;//播放前的图片（海报） -webkit-background-size:cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover; } </style><script> (function () { document.addEventListener('DOMContentLoaded', function () { var html = document.documentElement; var windowWidth = html.clientWidth; var windowHeiht = html.clientHeight; document.getElementById("container1").style.height =440/ 1334 * windowHeiht + "px"; document.getElementById("container1").style.paddingTop = 50/ 1334 * windowHeiht + "px"; var len = document.getElementsByClassName("img1").length; for (i = 0; i < len; i++) { document.getElementsByClassName("img1").item(i).style.width = 700/ 750 * windowWidth + "px"; document.getElementsByClassName("img1").item(i).style.height = 390/ 1334 * windowHeiht + "px";
}
}, false); })();</script></head><body><div class="container-fluid"><div id='container1' > <video class="img1" controls="true" preload="none"> <source src="../jfypxmp4/lezaigongzuo.mp4" type="video/mp4" /> </video>
</div>
</div></body>
</html>
