HTML5移动端视频播放器MP4

时间 2021-03-13

标签 javascript css html java jquery web bootstrap ide url spa 栏目 HTML5 繁體版

原文原文链接

1.前言：移动端能够播放MP4文件格式，HTML5的video标签实现了播放器。可是在移动端上初始化显示界面很差看，因此，这里将video包装起来，界面至少不丑。css

<!doctype html>html

<html>java

<head>jquery

<title>乐在工做</title>web

<title>Document</title>url

spa

<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>

(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>

</video>

</div>

</body>

</html>

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