HTML5移动端视频播放器MP4
农鸿达
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>
类似资料：