HTML定义是否显示控制面板,html---自定义视频播放控制台

最新推荐文章于 2022-12-06 14:13:05 发布

张洗月

最新推荐文章于 2022-12-06 14:13:05 发布

阅读量350

点赞数

文章标签： HTML定义是否显示控制面板

本文介绍了一种使用纯CSS实现的音视频播放器样式设计方案，包括播放控制按钮、进度条、音量调节等功能，并提供了详细的样式设置代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#box{

width:500px;

height:40px;

background:#ff0000;

border-radius:10px;

box-shadow:1px 1px 2px 2px #232;

border:1px solid #ff0000

}

.play{

width:0px;height:0px;

border-left:16px solid #fff;

border-top:12px solid rgba(255,255,255,0);

border-bottom:12px solid rgba(255,255,255,0);

float:left;

margin-top:10px;

margin-left:10px;cursor:pointer;

}

.pause{

width:6px;height:18px;

border-left:4px solid #fff;

border-right:4px solid #fff;

float:left;

margin-top:10px;

margin-left:10px;cursor:pointer;

}

#progress{

float:left;

width:60%;height:8px;background:#fff;

box-shadow:1px 1px 2px 2px #232;

border-radius:5px;

margin-top:16px;

margin-left:16px;

position:relative;

}

#bar{

width:10%;height:100%;background:#ccc;border-radius:3px;

display:inline-block;position:absolute;top:0;left:0;

}

#control{

width:17px;height:17px;position:absolute;border-radius:100%;

left:0;top:-4px;background:#fff;box-shadow:1px 1px 2px 2px #132;

cursor:pointer;

}

.soundon{

width:10px;height:8px;

border-right:13px solid #fff;

border-top:6px solid rgba(255,255,255,0);

border-bottom:6px solid rgba(255,255,255,0);

float:left;

margin-top:10px;

margin-left:10px;cursor:pointer;

}

.soundoff{

width:10px;height:8px;

border-right:13px solid #000;

border-top:6px solid rgba(255,255,255,0);

border-bottom:6px solid rgba(255,255,255,0);

float:left;

margin-top:10px;

margin-left:3px;cursor:pointer;

}

#volume{

float:left;

width:15%;height:5px;background:#fff;

box-shadow:1px 1px 2px 2px #232;

border-radius:5px;

margin-top:16px;

margin-left:2px;

position:relative;

}

#volume-bar{

width:10%;height:100%;background:#ccc;border-radius:3px;

display:inline-block;position:absolute;top:0;left:0;

}

#volume-control{

width:15px;height:15px;position:absolute;border-radius:100%;

left:0;top:-4px;background:#fff;box-shadow:1px 1px 2px 2px #132;

cursor:pointer;

}

#full{

width:15px;height:15px;border:3px solid #ccc;cursor:pointer;float:left;

margin-top:10px;margin-left:15px;transition:0.5s all;

}

#full:hover{

width:20px;height:20px;border:3px solid #ccc;cursor:pointer;float:left;

margin-top:7px;margin-left:13px;

}

window.onload=function () {

//box对象

var box=document.getElementById("box");

//视频对象

var video=document.getElementById("video");

//播放按钮

var play=document.getElementById("play");

//进度条

var progress=document.getElementById("progress");

//灰色进度条

var bar=document.getElementById("bar");

//声音按钮

var control=document.getElementById("control");

//喇叭

var sound=document.getElementById("sound");

//全屏

var full=document.getElementById("full")

full.addEventListener("click",function () {

//video.mozRequestFullScreen()

video.webkitRequestFullScreen()

},false)

play.onclick=function () {

if(video.paused){

play.className="pause";

video.play();

}else{

play.className="play";

video.pause();

}

//进度条

video.addEventListener("timeupdate",function () {

var scales=video.currentTime/video.duration;

bar.style.width=progress.offsetWidth*scales+"px";

control.style.left=progress.offsetWidth*scales+"px";

},false);

//进度条拖拽

control.onmousedown=function (e) {

video.pause();

document.onmousemove=function (e) {

var leftv=e.clientX-progress.offsetLeft-box.offsetLeft;

if(leftv<=0){

leftv=0;

}

if(leftv>=progress.offsetWidth){

leftv=progress.offsetWidth;

}

control.style.left=leftv+"px"

}

document.onmouseup=function () {

var scales=control.offsetLeft/progress.offsetWidth;

video.currentTime =video.duration*scales;

video.play();

document.onmousemove=null;

document.onmousedown=null;

}

sound.onclick=function () {

if(video.muted){

video.muted=false;

sound.className="soundon"

}else{

video.muted=true;

sound.className="soundoff"

}