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,这个核心代码在哪里,自己注意些!