a{
text-decoration: none;
}
.videoBox{
position: relative;
}
.videoB{
position: relative;
}
.videoB:before {
content: "\e650";
font-size: 70px;
color: #efefef;
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
.videoB.pause:before {
content: "\e606";
}
.videoB.noIcon:before {
content: "";
}
.videoBox video{
width: 100%;
display: block;
}
.controls{
position: absolute;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(0,0,0,.5);
padding: 10px;
color: #fff;
opacity: 1;
transition: opacity 1s;
}
.controls a{
color: #fff;
}
.controls a i{
font-size: 18px;
}
.playBtn .icon-bofang{display: none;}
.playBtn.active .icon-bofang{display: inline-block;}
.playBtn.active .icon-bofang1{display: none;}
.muted{margin-left: 20px;}
.muted .icon-mute_icon{display: none;}
.muted.active .icon-mute_icon{display: inline-block;}
.muted.active .icon-yinliang{display: none;}
.time{
display: inline-block;
margin-left: 10px;
}
.fullScreen{float: right;}
// 暂停其他视频;
function pauseAll() {
var all = document.querySelectorAll('video');
for (var i=0 ,len=all.length; i
all[i].pause();
}
}
videoInit('.videoBox1',function () {
pauseAll();
});
videoInit('.videoBox2',function () {
pauseAll();
});
function videoInit(cla ,callback) {
var playBtn = el('.playBtn')
,muted = el('.muted')
,fullScreen = el('.fullScreen')
,controls = el('.controls')
,videoB = el('.videoB')
,video = el('#video')
,time = el('.time')
,videoTime
,currentTime
,timer
;
video.onloadedmetadata = videoFun;
// 初始化菜单栏功能;
function videoFun() {
// 更改当前进度;
// video.currentTime = 178;
// 当前时间,进度;
getTime();
// 播放,暂停;
video.onclick = play;
playBtn.onclick = play;
// 播放结束;
video.onended = function(){
clearInterval(timer);
playBtn.classList.remove('active');
videoB.classList.remove('noIcon');
videoB.classList.add('pause');
controls.style.opacity = 1;
};
// 禁音;
muted.onclick = function(){
video.muted = !video.muted;
if(video.muted){
this.classList.add('active');
}else {
this.classList.remove('active');
}
};
// 全屏;
fullScreen.onclick = function(){
video.webkitRequestFullScreen();
};
}
// 播放,暂停;
function play(){
clearInterval(timer);
if(video.paused){
if(callback){
callback()
}
video.play();
playBtn.classList.add('active');
videoB.classList.remove('pause');
videoB.classList.add('noIcon');
// 更新时间;
timer = setInterval(function () {
getTime();
},1000);
setTimeout(function () {
controls.style.opacity = 0;
},1000)
}else {
video.pause();
playBtn.classList.remove('active');
videoB.classList.remove('noIcon');
videoB.classList.add('pause');
controls.style.opacity = 1;
}
}
// 当前时间,进度;
function getTime() {
videoTime = parseInt( video.duration/60 ) + ':' + addZero( Math.floor( video.duration%60 ) );
currentTime = parseInt( video.currentTime/60 ) + ':' + addZero( Math.floor( video.currentTime%60 ) );
time.innerHTML = currentTime + '/' + videoTime;
}
function el(id) {
return document.querySelector(cla).querySelector(id);
}
function addZero(nub) {
return nub > 9 ? nub : '0' + nub;
}
}
一键复制
编辑
Web IDE
原始数据
按行查看
历史