HTML自定义菜单栏形状,video自定义菜单栏.html

Document

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

原始数据

按行查看

历史