스타일 탐색 슬라이더

여기에이 비디오 플레이어가 있는데 뭔가 문제가 있습니다. 슬라이더 엄지 손가락 뒤에 다른 색상을 보이게하려고합니다. This is What I'm trying to achive 스타일 탐색 슬라이더

나는 어디에서나 보았고 내가 찾고있는 스타일과 일치하는 것을 찾을 수 없다. 가능한 어떤 방법이 있나.

var vid, playbtn, seekslider, curtimetext, durtimetext, mutebtn, volumeslider, fullscreenbtn; 
 
function intializePlayer(){ 
 
\t // Set object references 
 
\t vid = document.getElementById("my_video"); 
 
\t playbtn = document.getElementById("playpausebtn"); 
 
\t seekslider = document.getElementById("seekslider"); 
 
\t curtimetext = document.getElementById("curtimetext"); 
 
\t durtimetext = document.getElementById("durtimetext"); 
 
\t mutebtn = document.getElementById("mutebtn"); 
 
\t volumeslider = document.getElementById("volumeslider"); 
 
\t fullscreenbtn = document.getElementById("fullscreenbtn"); 
 
\t // Add event listeners 
 
\t playbtn.addEventListener("click",playPause,false); 
 
\t seekslider.addEventListener("change",vidSeek,false); 
 
\t vid.addEventListener("timeupdate",seektimeupdate,false); 
 
\t mutebtn.addEventListener("click",vidmute,false); 
 
\t volumeslider.addEventListener("change",setvolume,false); 
 
\t fullscreenbtn.addEventListener("click",toggleFullScreen,false); 
 
} 
 
window.onload = intializePlayer; 
 
function playPause(){ 
 
\t if(vid.paused){ 
 
\t \t vid.play(); 
 
\t \t 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%"; 
 
\t } else { 
 
\t \t vid.pause(); 
 
\t \t  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%"; 
 
\t } 
 
} 
 

 

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

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; 
 
}

<!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>

출처

2017-12-15 Me The Man

현재 내부 슬라이더 (input의 range 형)의 다른 구성 요소의 스타일에 타겟팅 어떤 표준화 규격이 없다.

사용 표준이 아닌 실험 벤더 고유의 의사 요소

이를 달성하기위한 표준 방법이 없다하더라도, 모든 :이 효과를 구현하려면 다음 두 가지 방법 중 하나를 사용할 수 있습니다 주요 브라우저 공급 업체는 슬라이더의 스타일을 제어하기 위해 의사 요소를 사용하고 있습니다.
- 크롬/사파리/오페라 : 웹킷에 input 유형 range의 스타일을 제어하는 직접적인 수단이 없다. 유사한 접근 방식은 슬라이더로 <progress /> 요소를 사용합니다. ::-webkit-progress-value는 엄지 손가락의 트랙 스타일을 제어합니다. (MDN ::-webkit-progress-value);
- 파이어 폭스 : ::-moz-range-progress 컨트롤 엄지 손가락 (MDN ::-moz-range-progress) 전 트랙의 스타일;
- 에지/IE : 엄지 각각의 트랙 ::-ms-fill-lower::-ms-fill-upper 및 컨트롤 (또는 수직 슬라이더 상하부) 좌우 측면 . (MDN ::-ms-fill-lower 및 MDN ::-ms-fill-upper).
당신은 슬라이더의 트랙의 특정 부분에 스타일 규칙을 적용하기 위해 각각 각 페이지를 확인할 수 있습니다.

이 방법을 사용하면 다양한 브라우저에서 많은 스타일을 유지해야합니다. 그리고 브라우저가 이 CSS 규칙에 대한 그들의 해석을 바꾼 후에 당신의 스타일이 깨질 수 있습니다. 그러나 이것은 순수한 CSS로 달성 할 수 있습니다. 슬라이더가 순수하게 현재의 진행 상황을 표시하고 진행 상황을 변경하는 사용자에 대한 인터페이스를 제공하는 제어이기 때문에
이 슬라이더를

을 구성하는 DOM 노드의 세트를 사용하여, 당신은 DOM의 세트에 노드를 사용할 수 있습니다 이 작업을 완료하고 사용자와의 상호 작용 을 처리하기 위해 관련 이벤트 수신기를 등록하십시오.

출처

2017-12-16 05:45:53

코드에 어떻게 구현합니까? –

답변

관련 문제