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>

2.后序：代码中存在多余代码，比如引入bootstrap4.0的css和js，这个核心代码在哪里，自己注意些！

HTML5移动端视频播放器MP4

猜你喜欢