video作为h5中新增的标签,定义视频,比如电影片段或其他视频流。
video在各个浏览器中的默认控件都不太一样,还不太好看,所以就得自定义
分享一个自己写的video控件,实现功能包括暂停/播放、进度条控制、音量调节、时间显示、全屏
<div class="video">
<video id="video1" src="source/jslm.mp4">video>
<div class="cover">
<div id="playStatus">div>
<div class="controls">
<div id="contPlayStatus">div>
<div id="currentTime">00:00:00div>
<input id="progressBar" type="range" name="" min="0" max="1000" value="0">
<div id="duration">00:00:00div>
<div id="volume">div>
<div id="volumeInput">
<input id="volumeInputRange" type="range" name="" min="0" max="100" value="100">
div>
<div id="fullScreen">div>
div>
div>
div>
* {
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
}
.video {
width: 1080px;
height: 460px;
margin: 0 auto;
position: relative;
}
.video video {
/* width: 1080px;
height: 460px; */
position: absolute;
left: 50%;
transform: translateX(-50%);
height: 100%;
/* object-fit: contain; */
object-fit: scale-down;
object-position: center center;
}
video::-webkit-media-controls {
/* 去掉全屏时显示的自带控制条 */
display: none !important;
}
.cover {
width: 1080px;
height: 460px;
background-color: rgba(116, 116, 116, 0.3);
position: absolute;
left: 0;
top: 0;
}
#playStatus {
width: 64px;
height: 64px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url(../img/play.png);
}
.controls {
width: 1080px;
height: 64px;
background-image: linear-gradient(transparent, #70939b);
position: absolute;
bottom: 0;
display: flex;
justify-content: space-around;
}
#contPlayStatus {
width: 32px;
height: 32px;
background-image: url(../img/play32.png);
position: relative;
top: 16px;
/* border: 1px solid red; */
}
#currentTime {
width: 84px;
height: 64px;
/* border: 1px solid red; */
text-align: center;
line-height: 64px;
font-size: 16px;
color: #52d3f0;
}
#progressBar {
/* 进度条样式 */
-webkit-appearance: none;
width: 700px;
height: 5px;
/* border: 1px solid red; */
position: relative;
top: 30px;
background-color: #eee;
border-radius: 2.5px;
}
#progressBar::-webkit-slider-thumb {
/* 进度条滑块样式 */
-webkit-appearance: none;
width: 12px;
height: 12px;
cursor: pointer;
background: none repeat scroll 0 0 #52d3f0;
border-radius: 6px;
}
#duration {
width: 84px;
height: 64px;
/* border: 1px solid red; */
text-align: center;
line-height: 64px;
font-size: 16px;
color: #52d3f0;
}
#volume {
width: 32px;
height: 32px;
/* border: 1px solid red; */
position: relative;
top: 16px;
background-image: url(../img/volume.png);
}
#volumeInput {
width: 32px;
height: 120px;
position: absolute;
left: 940px;
top: -105px;
display: none;
}
#volumeInputRange {
transform: rotate(270deg);
-webkit-appearance: none;
width: 120px;
height: 5px;
/* border: 1px solid red; */
position: absolute;
left: 0px;
top: 55px;
background-color: #eee;
border-radius: 2.5px;
}
#volumeInputRange::-webkit-slider-thumb {
-webkit-appearance: none;
width: 12px;
height: 12px;
cursor: pointer;
background: none repeat scroll 0 0 #52d3f0;
border-radius: 6px;
}
#volume:hover+#volumeInput {
display: block;
}
#volumeInput:hover {
display: block;
}
#fullScreen {
width: 32px;
height: 32px;
/* border: 1px solid red; */
position: relative;
top: 16px;
background-image: url(../img/fullscreen.png);
}
// 需要获取的元素
var divVideo = document.getElementsByClassName("video")[0];
var divCover = document.getElementsByClassName("cover")[0];
var video1 = document.getElementById("video1");
var playStatus = document.getElementById("playStatus");
var controls = document.getElementsByClassName("controls")[0];
var contPlayStatus = document.getElementById("contPlayStatus");
var currentTime = document.getElementById("currentTime");
var progressBar = document.getElementById("progressBar");
var duration = document.getElementById("duration");
var volume = document.getElementById("volume");
var fullScreen = document.getElementById("fullScreen");
divVideo.addEventListener("mouseenter", function() {
divCover.style.display = "block";
})
divVideo.addEventListener("mouseleave", function() {
divCover.style.display = "none";
})
video1.addEventListener("play", function() {
playStatus.style.backgroundImage = "url(img/pause.png)";
contPlayStatus.style.backgroundImage = "url(img/pause32.png)"
})
video1.addEventListener("pause", function() {
playStatus.style.backgroundImage = "url(img/play.png)";
contPlayStatus.style.backgroundImage = "url(img/play32.png)";
})
playStatus.addEventListener("click", play_pause);
contPlayStatus.addEventListener("click", play_pause);
setInterval(function() {
progressBar.value = video1.currentTime / video1.duration * 1000;
currentTime.innerHTML = getTime(video1.currentTime);
duration.innerHTML = getTime(video1.duration);
}, 1000)
progressBar.addEventListener("input", function() {
video1.currentTime = video1.duration * (progressBar.value / 1000);
video1.play();
})
var currVolume;
volume.addEventListener("click", function() {
if (video1.volume != 0) {
currVolume = video1.volume;
video1.volume = 0;
volumeInputRange.value = 0;
this.style.backgroundImage = "url(img/volumeoff.png)";
} else {
video1.volume = currVolume;
volumeInputRange.value = currVolume * 100;
this.style.backgroundImage = "url(img/volume.png)";
}
})
video1.volume = 0.3;
volumeInputRange.value = 30;
volumeInputRange.addEventListener("input", function() {
video1.volume = Number(this.value) / 100;
volume.style.backgroundImage = video1.volume == 0 ? "url(img/volumeoff.png)" : "url(img/volume.png)";
})
var fullScreenStatus = false;
fullScreen.addEventListener("click", function() {
if (!fullScreenStatus) {
var body = document.body;
body.webkitRequestFullScreen();
divVideo.style.width = innerWidth + "px";
divVideo.style.height = innerWidth / (2538 / 1080) + "px";
divVideo.style.position = "absolute";
divVideo.style.left = "50%";
divVideo.style.top = "50%";
divVideo.style.transform = "translate(-50%, -50%)";
divCover.style.width = innerWidth + "px";
divCover.style.height = innerWidth / (2538 / 1080) + "px";
controls.style.width = innerWidth + "px";
var num = innerWidth - 1100;
progressBar.style.width = parseInt(getComputedStyle(progressBar).width) + num + "px";
volumeInput.style.left = parseInt(getComputedStyle(volumeInput).left) + num + 15 + "px";
fullScreenStatus = true;
} else {
document.webkitCancelFullScreen();
divVideo.style.width = "";
divVideo.style.height = "";
divVideo.style.position = "";
divVideo.style.left = "";
divVideo.style.top = "";
divVideo.style.transform = "";
divCover.style.width = "";
divCover.style.height = "";
controls.style.width = "";
var num = innerWidth - 1100;
progressBar.style.width = "";
volumeInput.style.left = "";
fullScreenStatus = false;
}
})
function play_pause() {
if (video1.paused) {
video1.play();
audio1.pause();
check_box.checked = false;
} else {
video1.pause();
}
}
function getTime(time) {
let hour = Math.floor(time / 3600) < 10 ? "0" + Math.floor(time / 3600) : Math.floor(time / 3600);
let min = Math.floor(time % 3600 / 60) < 10 ? "0" + Math.floor(time % 3600 / 60) : Math.floor(time % 3600 / 60);
var sec = Math.floor(time % 60) < 10 ? "0" + Math.floor(time % 60) : Math.floor(time % 60);
return hour + ":" + min + ":" + sec;
}