HTML5移動端視頻播放器MP4

時間 2021-03-13

標籤 javascript css html java jquery web bootstrap ide url spa 欄目 HTML5 简体版

原文原文鏈接

參考連接： HTML5-視頻播放器javascript

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，這個核心代碼在哪裏，本身注意些！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。