Styling seek slider

2019-07-16 05:25发布

站内文章 / JavaScript
43 0 0

问题:

I have this video player here and I'm having trouble with something. I'm Trying to make the seekslider show a different color after the slider thumb. This is What I'm trying to achive

I looked everywhere and cannot find one that works and matches a the style I'm looking for, Is there any possible way to do this. 

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

回答1:

Currently, there are not any standardized specifications that targeting on the styling of different components inside of a slider (input of range type). To implement this effect, you can use one of the following two approaches:

  1. Use non-standard and experimental vendor-specific pseudo-element

    Even though there are no standard way to achieve this, all major browser vendors are using some pseudo-element to provide control of style of slider.

    • Chrome / Safari / Opera: There is no direct means to control the style of input of range type in WebKit. A similar approach is use <progress /> element as slider. ::-webkit-progress-value controls the style of track before the thumb (MDN ::-webkit-progress-value);

    • Firefox: ::-moz-range-progress controls the style of track before the thumb (MDN ::-moz-range-progress);

    • Edge / IE: ::-ms-fill-lower and ::-ms-fill-upper controls the left and right side (or lower and upper for vertical slider) of the track of the thumb respectively. (MDN ::-ms-fill-lower and MDN ::-ms-fill-upper).

    You can check each page respectively to apply style rules to specific portion of the track of a slider.

    This approach requires you to maintain lots of style across different browsers. And your style may break in the future when browser changed their interpretation of these CSS rules. But this can be achieve in pure CSS.

  2. Use a set of DOM nodes to compose a slider

    Since a slider is purely a control to indicate current progress and provide interface for user to change the progress, you can use a set of DOM nodes to achieve this and register related event listener to handle the interaction with user.



标签： javascript html css video range
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~