造型寻找滑块

时间：2017-12-15 23:44:26

标签： javascript html css video range

我有这个视频播放器，我遇到了麻烦。 我试图让滑板拇指后的seeklider显示不同的颜色。 This is What I'm trying to achive

我到处寻找，找不到一个有效的，符合我寻找的风格，有没有办法做到这一点。

＆＃13;
＆＃13; 
var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn;
function intializePlayer(){
	// Set object references
	vid = document.getElementById("my_video");
	playbtn = document.getElementById("playpausebtn");
	seekslider = document.getElementById("seekslider");
	curtimetext = document.getElementById("curtimetext");
	durtimetext = document.getElementById("durtimetext");
	mutebtn = document.getElementById("mutebtn");
	volumeslider = document.getElementById("volumeslider");
	fullscreenbtn = document.getElementById("fullscreenbtn");
	// Add event listeners
	playbtn.addEventListener("click",playPause,false);
	seekslider.addEventListener("change",vidSeek,false);
	vid.addEventListener("timeupdate",seektimeupdate,false);
	mutebtn.addEventListener("click",vidmute,false);
	volumeslider.addEventListener("change",setvolume,false);
	fullscreenbtn.addEventListener("click",toggleFullScreen,false);
}
window.onload = intializePlayer;
function playPause(){
	if(vid.paused){
		vid.play();
		playbtn.style.background = "url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/pause.png)";
playbtn.style.backgroundSize="100% 100%";
	} else {
		vid.pause();
		    playbtn.style.background = "url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/play.png)";
playbtn.style.backgroundSize="100% 100%";
	}
}


function vidSeek(){
	var seekto = vid.duration * (seekslider.value / 100);
	vid.currentTime = seekto;
}
function seektimeupdate(){
	var nt = vid.currentTime * (100 / vid.duration);
	seekslider.value = nt;
	var curmins = Math.floor(vid.currentTime / 60);
	var cursecs = Math.floor(vid.currentTime - curmins * 60);
	var durmins = Math.floor(vid.duration / 60);
	var dursecs = Math.floor(vid.duration - durmins * 60);
	if(cursecs < 10){ cursecs = "0"+cursecs; }
	if(dursecs < 10){ dursecs = "0"+dursecs; }
	if(curmins < 10){ curmins = "0"+curmins; }
	if(durmins < 10){ durmins = "0"+durmins; }
	curtimetext.innerHTML = curmins+":"+cursecs;
	durtimetext.innerHTML = durmins+":"+dursecs;
}
function vidmute(){
	if(vid.muted){
		vid.muted = false;
		mutebtn.style.background = "url(file:///H:/SSEmery/player/unmute.png) no-repeat";
mutebtn.style.backgroundSize="100% 100%";
	} else {
		vid.muted = true;
		mutebtn.style.background = "url(file:///H:/SSEmery/player/mute.png) no-repeat";
mutebtn.style.backgroundSize="100% 100%";
	}
}
function setvolume(){
	vid.volume = volumeslider.value / 100;
}
function toggleFullScreen(){
	if(vid.requestFullScreen){
		vid.requestFullScreen();
	} else if(vid.webkitRequestFullScreen){
		vid.webkitRequestFullScreen();
	} else if(vid.mozRequestFullScreen){
		vid.mozRequestFullScreen();
	}
}
＆＃13; 
video#my_video {
    top: 0px;
    position: relative;
    width: 100%;
    height: 56.2225%;
}

div.time {
    font-family: monospace;
    color: #ffffff;
    text-shadow: 1px 1px 0.5px #0000ff;
    background: #4b4b4b;
    background: -webkit-linear-gradient(top, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#4b4b4b),color-stop(25%, #1e1e1e),color-stop(44%, #000000),to(#000000));
    background: -o-linear-gradient(top, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
    background: linear-gradient(to bottom, #4b4b4b 0%,#1e1e1e 25%,#000000 44%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b4b4b', endColorstr='#000000',GradientType=0 );
    margin-left: 2px;
    display: inline-block;
    background-color: black;
    padding: 2px 2px 2px 2px;
    border: 1px solid white;
    border-radius: 5px;
}

div#video_player_box {
    background-repeat: no-repeat;
    background-size: 100% 85%;
    max-width: 787px;
    max-height: 787px;
    border-top: 5px solid #646464;
    border-right: 5px solid #000000;
    border-left: 5px solid #646464;
    border-bottom: 5px solid #000000;
    margin: 0px auto;
    background: #000000;
}

div#video_controls_bar {
    background: #9d9d9d;
    background: -webkit-linear-gradient(top, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(#9d9d9d),color-stop(10%, #8d8d8d),color-stop(43%, #4f4f4f),color-stop(51%, #474747),color-stop(51%, #1e1e1e),to(#000000));
    background: -o-linear-gradient(top, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
    background: linear-gradient(to bottom, #9d9d9d 0%,#8d8d8d 10%,#4f4f4f 43%,#474747 51%,#1e1e1e 51%,#000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9d9d9d', endColorstr='#000000',GradientType=0 );
    border-top: 5px solid #000;
    border-right: 5px solid #646464;
    border-left: 5px solid #000;
    border-bottom: 5px solid #646464;
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px;
    color: #fff;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

button#playpausebtn.playpausebtn {
    right: 4px;
    border-radius: 100%;
    background-size: 100% 100%;
    border: none;
    outline: none;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnon.png) no-repeat;
    float: left;
    width: 44px;
    height: 44px;
    cursor: pointer;
    opacity: 1;
}

button#playpausebtn:hover {
    width: 44px;
    height: 44px;
    background-size: 100% 100%;
    border: none;
    outline: none;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnonhover.png) no-repeat;
}

button#playpausebtn:active {
    width: 44px;
    height: 44px;
    background-size: 100% 100%;
    border: none;
    outline: none;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnonclick.png) no-repeat;
}

button#fullscreenbtn {
    border-radius: 100%;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreen.png) no-repeat;
    border-style: solid;
    background-size: 100% 100%;
    border-top: 2px solid #000;
    border-right: 2px solid #646464;
    border-left: 2px solid #000;
    border-bottom: 2px solid #646464;
    width: 25px;
    float: right;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

button#fullscreenbtn:hover {
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreenhover.png) no-repeat;
    border-style: solid;
    background-size: 100% 100%;
    border-top: 2px solid #000;
    border-right: 2px solid #646464;
    border-left: 2px solid #000;
    border-bottom: 2px solid #646464;
    width: 25px;
    float: right;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

button#fullscreenbtn:active {
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/fullscreenclick.png) no-repeat;
    border-style: solid;
    background-size: 100% 100%;
    border-top: 2px solid #000;
    border-right: 2px solid #646464;
    border-left: 2px solid #000;
    border-bottom: 2px solid #646464;
    width: 25px;
    float: right;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

button#mutebtn.mutebtn {
    position: fixed;
    background-size: 100% 100%;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/unmute.png) no-repeat;
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
    border-radius: 100%;
}

button#mutebtn:hover {
    background-size: 100% 100%;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volhover.png) no-repeat;
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

button#mutebtn:active {
    background-size: 100% 100%;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volclick.png) no-repeat;
    width: 25px;
    height: 25px;
    cursor: pointer;
    opacity: 1;
    border: none;
    outline: none;
}

input#seekslider {
    margin-bottom: 13px;
    float: right;
    -webkit-box-shadow: inset 0 0 1px 0.1px white;
    box-shadow: inset 0 0 1px 0.1px white;
    outline: none;
    max-height: 5px;
    height: 100%;
    width: 100%;
    max-width: 707px;
    float: top;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.61)),color-stop(10%, rgba(255,255,255,0.55)),color-stop(43%, rgba(255,255,255,0.3)),color-stop(50%, rgba(255,255,255,0.27)),color-stop(51%, rgba(255,255,255,0.11)),to(rgba(255,255,255,0))), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
    background: -o-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
    background: linear-gradient(to bottom, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/seek.png") no-repeat center;
    background-size: 100% 100%;
}

input#volumeslider {
    margin-left: 30px;
    -webkit-box-shadow: inset 0 0 1px 0.1px white;
    box-shadow: inset 0 0 1px 0.1px white;
    outline: none;
    max-width: 128px;
    width: 100%;
    height: 100%;
    max-height: 10px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.61)),color-stop(10%, rgba(255,255,255,0.55)),color-stop(43%, rgba(255,255,255,0.3)),color-stop(50%, rgba(255,255,255,0.27)),color-stop(51%, rgba(255,255,255,0.11)),to(rgba(255,255,255,0))), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
    background: -o-linear-gradient(top, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
    background: linear-gradient(to bottom, rgba(255,255,255,0.61) 0%,rgba(255,255,255,0.55) 10%,rgba(255,255,255,0.3) 43%,rgba(255,255,255,0.27) 50%,rgba(255,255,255,0.11) 51%,rgba(255,255,255,0) 100%), url("https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volume.png") no-repeat center;
    background-size: 100% 100%;
}

input[type='range'] {
    -webkit-appearance: none !important;
    border-width: 1px;
    border-style: solid;
    border-color: #000;
}

input[type='range']::-webkit-slider-thumb {
    border-radius: 100%;
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timeslider.png) no-repeat;
    background-size: 100% 100%;
    height: 15px;
    width: 15px;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

input[type='range']::-webkit-slider-thumb:hover {
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timesliderhover.png) no-repeat;
    background-size: 100% 100%;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

input[type='range']::-webkit-slider-thumb:active {
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/timesliderclick.png) no-repeat;
    background-size: 100% 100%;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

input[type='range'].vol {
    -webkit-appearance: none !important;
    border-width: 1px;
    border-style: solid;
    border-color: hsl(0, 0%, 0%);
}

input[type='range'].vol::-webkit-slider-thumb {
    border-radius: 100%;
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/vol.png) no-repeat;
    background-size: 100% 100%;
    height: 15px;
    width: 15px;
    cursor: pointer;
    -webkit-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

input[type='range'].vol::-webkit-slider-thumb:hover {
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volhover.png) no-repeat;
    background-size: 100% 100%;
    height: 18px;
    width: 18px;
    cursor: pointer;
}

input[type='range'].vol::-webkit-slider-thumb:active {
    -webkit-appearance: none !important;
    background: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/volclick.png) no-repeat;
    background-size: 100% 100%;
    height: 18px;
    width: 18px;
    cursor: pointer;
}
＆＃13; 
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="video_player_box">
 <video id="my_video"  width="100%" height="56.2225%" controlslist="nodownload">
    <source src="https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/test.mp4" >
  </video>
 </head>
 <body>
  <div id="video_controls_bar">
    <input id="seekslider" type="range" min="0" max="100" value="0" step="1">
<button id="playpausebtn" class="playpausebtn" style= "background-size: 100% 100%;" "background-image: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/Turnon.png);"></button>
<div class="time">
  <span id="curtimetext">SSEmery</span> / <span id="durtimetext">Player</span>
  </div>
<button id="mutebtn" class="mutebtn" style= "background-size: 100% 100%;" "background-image: url(https://www.weebly.com/editor/uploads/9/5/2/5/95251978/custom_themes/887526295474118648/files/style/Player/unmute.png) no-repeat;"></button>
    <input id="volumeslider" class="vol" type="range" min="0" max="100" value="100" step="1">
    <button id="fullscreenbtn"></button> 
</div>
</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

目前，没有任何标准化规范针对滑块内input类型range的不同组件的样式。要实现此效果，您可以使用以下两种方法之一：

  1. 使用非标准和实验性供应商特定的伪元素

    即使没有标准的方法来实现这一点，所有主流浏览器 供应商正在使用一些伪元素来控制滑块的样式。

    • Chrome / Safari / Opera： 没有直接的方法可以控制input range类型的<progress />样式 在WebKit中。类似的方法是使用::-webkit-progress-value元素作为滑块。 ::-moz-range-progress控制拇指前的音轨风格 （MDN ::-webkit-progress-value）;

    • 火狐： ::-ms-fill-lower控制拇指前的音轨风格 （MDN ::-moz-range-progress）;

    • Edge / IE： ::-ms-fill-upper和<?php控制左右 拇指轨道的一侧（或垂直滑块的下部和上部） 分别。 （MDN ::-ms-fill-lower和MDN ::-ms-fill-upper）。

    您可以分别检查每个页面以将样式规则应用于特定页面 滑块轨道的一部分。

    这种方法要求你在不同的方面保持很多风格 浏览器。当浏览器改变时，你的风格可能在未来破裂 他们对这些CSS规则的解释。但这可以通过纯粹的方式实现 CSS。

  2. 使用一组DOM节点组成滑块

    由于滑块纯粹是指示当前进度并提供的控件 用户更改进度的界面，可以使用一组DOM节点来实现 实现这一点并注册相关的事件监听器来处理交互 与用户。

相关问题
最新问题