因此，我正在制作以Netflix为主题的HTML视频播放器，并且我在javascript中使用了线性渐变，因此我的搜索栏（这是一个自定义范围滑块）在拇指后面将具有不同的颜色。手动滑动时效果很好，但是当拇指自动滑动以跟随视频时，渐变保持不变
这里是代码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Netflix video player</title>
<link rel="stylesheet" href="https://cdnjs.cloudlflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="c-video">
<video class="video" src="video.mp4" ></video>
<div class="controls">
<div class="red-bar">
<input class="red-juice" type="range" min="1" max="100" step="1" value="1"></input>
</div>
</div>
<div class="buttons">
<button id="play-pause"></button>
</div>
<div class="title"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
css：
.container {
display: flex;
background-color: #000000;
justify-content: center;
align-items: center;
height: 100vh;
}
.video {
width: 100%;
}
.c-video {
width: 100%;
max-width: 800px;
position: relative;
overflow: hidden;
}
.c-video:hover .title {
transform: translateY(0);
}
.c-video:hover .controls {
transform: translateY(0);
}
.c-video:hover .buttons {
top: 50%;
left: 50%;
transform: translate(240%,-50%);
}
.title {
display: flex;
position: absolute;
top: 0;
height: 120px;
width: 100%;
flex-wrap: wrap;
background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.01));
transform: translateY(-100%);
transition: all .2s;
}
.controls {
display: flex;
position: absolute;
bottom: 0;
height: 70px;
width: 100%;
flex-wrap: wrap;
background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.9));
transform: translateY(100%);
transition: all .2s;
}
.buttons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-999%,-50%);
}
.buttons button {
background:none;
height: 45px;
border: none;
outline: 0;
cursor: pointer;
transform: translate(-300%, 0px);
}
.buttons button:before {
content: "\f144";
font-family: "Font Awesome 5 Free";
display: inline-block;
font-size: 300%;
color: #ffff;
-webkit-font-smoothing: antialiased;
}
.buttons button.play:before {
content: "\f144";
font-family: 'Font Awesome 5 Free';
}
.buttons button.pause:before {
content: "\f28b";
font-family: 'Font Awesome 5 Free';
}
/* Progress bar container */
.red-bar {
height: 2px;
margin-top:15px ;
margin-bottom: -15px;
background-color:rgba(0, 0, 0, 0.4);
margin-left: 10px;
margin-right: 10px;
width: 100%;
}
/* This represents the progress bar */
.red-juice {
position: relative;
width: 100%;
height: 2px; /* thumbHeight + (2 x thumbBorderWidth)*/
background-image: linear-gradient(to right, red 1%, rgba(0, 0, 0, 0.4) 1%);
-webkit-appearance: none; /*remove the line*/
outline: none;
top: -12px;
margin-left: 1px;
margin-right: 100px;
}
.red-juice::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 20px;
}
.red-juice::-webkit-slider-thumb {
-webkit-appearance: none;
background: red; /*thumbColor*/
width: 15px; /* thumbHeight + (2 x thumbBorderWidth)*/
height: 15px; /* thumbHeight + (2 x thumbBorderWidth)*/
border-radius: 100%;
margin-top: 1px; /* -[thumbHeight + (2 x thumbBorderWidth) - trackHeight]/2*/
cursor: pointer;
border: 0px solid #fff; /*border-width should be equal to thumbBorderWidth if you want same border width across all browsers and border-color should match the background*/
transition: 0.3s;
}
javascript：
var video = document.querySelector(".video");
var juice = document.querySelector(".red-juice");
var btn = document.getElementById("play-pause");
function togglePlayPause() {
if(video.paused) {
btn.className = 'pause';
video.play();
} else {
btn.className = 'play';
video.pause();
}
}
btn.onclick = function (params) {
//video.fastSeek(570); // 9:30
// video.currentTime = 570; //test
togglePlayPause();
}
video.addEventListener('timeupdate', function() {
if(video.ended) {
btn.className = "play";
// At the end of the movie, reset the position to the start and pause the playback.
video.currentTime = 0;
togglePlayPause();
}
});
video.addEventListener('timeupdate', () => {
juice.value = video.currentTime / video.duration * juice.max
})
juice.addEventListener('change', () => {
video.currentTime = video.duration * juice.value / juice.max
})
juice.oninput = function slidingProgress() {
juice.style.background = 'linear-gradient(to right, red ' + juice.value * 100 / juice.max + '%, rgba(0, 0, 0, 0.4) ' + this.value + '%, rgba(0, 0, 0, 0.4) 100%)'
};
juice.addEventListener(slidingProgress);
问题是您将函数直接绑定到oninput handler，而确实不是]被触发只是通过以编程方式更改input的值。
您可以通过在oninput外部声明函数，然后稍后将其分配给它[在timeupdate侦听器中调用它来解决此问题。在将函数分配给oninput之前或之后声明函数并没有关系，只要您使用function关键字进行声明即可，因为它会获得hoisted。工作片段
var video = document.querySelector(".video");
var juice = document.querySelector(".red-juice");
var btn = document.getElementById("play-pause");
function togglePlayPause() {
if (video.paused) {
btn.className = 'pause';
video.play();
} else {
btn.className = 'play';
video.pause();
}
}
btn.onclick = function(params) {
//video.fastSeek(570); // 9:30
// video.currentTime = 570; //test
togglePlayPause();
}
video.addEventListener('timeupdate', function() {
if (video.ended) {
btn.className = "play";
// At the end of the movie, reset the position to the start and pause the playback.
video.currentTime = 0;
togglePlayPause();
}
});
function slidingProgress() {
// this.value will not work here, since it points to the global window obj
// so I'm using juice.value instead
// See: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this#Function_context
juice.style.background = 'linear-gradient(to right, red ' + juice.value * 100 / juice.max + '%, rgba(0, 0, 0, 0.4) ' + juice.value + '%, rgba(0, 0, 0, 0.4) 100%)'
}
video.addEventListener('timeupdate', () => {
juice.value = video.currentTime / video.duration * juice.max
slidingProgress() // Call your function here to update .red-juice
})
juice.addEventListener('change', () => {
video.currentTime = video.duration * juice.value / juice.max
})
// And finally assign it to juice.oninput
juice.oninput = slidingProgress;
// you're not specifying any events to listen to here, so it wouldn't work
// juice.addEventListener(slidingProgress);.container {
display: flex;
background-color: #000000;
justify-content: center;
align-items: center;
height: 100vh;
}
.video {
width: 100%;
}
.c-video {
width: 100%;
max-width: 800px;
position: relative;
overflow: hidden;
}
.c-video:hover .title {
transform: translateY(0);
}
.c-video:hover .controls {
transform: translateY(0);
}
.c-video:hover .buttons {
top: 50%;
left: 50%;
transform: translate(240%, -50%);
}
.title {
display: flex;
position: absolute;
top: 0;
height: 120px;
width: 100%;
flex-wrap: wrap;
background-image: linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.01));
transform: translateY(-100%);
transition: all .2s;
}
.controls {
display: flex;
position: absolute;
bottom: 0;
height: 70px;
width: 100%;
flex-wrap: wrap;
background-image: linear-gradient(rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.9));
transform: translateY(100%);
transition: all .2s;
}
.buttons {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-999%, -50%);
}
.buttons button {
background: none;
height: 45px;
border: none;
outline: 0;
cursor: pointer;
transform: translate(-300%, 0px);
}
.buttons button:before {
content: "\f144";
font-family: "Font Awesome 5 Free";
display: inline-block;
font-size: 300%;
color: #ffff;
-webkit-font-smoothing: antialiased;
}
.buttons button.play:before {
content: "\f144";
font-family: 'Font Awesome 5 Free';
}
.buttons button.pause:before {
content: "\f28b";
font-family: 'Font Awesome 5 Free';
}
/* Progress bar container */
.red-bar {
height: 2px;
margin-top: 15px;
margin-bottom: -15px;
background-color: rgba(0, 0, 0, 0.4);
margin-left: 10px;
margin-right: 10px;
width: 100%;
}
/* This represents the progress bar */
.red-juice {
position: relative;
width: 100%;
height: 2px;
/* thumbHeight + (2 x thumbBorderWidth)*/
background-image: linear-gradient(to right, red 1%, rgba(0, 0, 0, 0.4) 1%);
-webkit-appearance: none;
/*remove the line*/
outline: none;
top: -12px;
margin-left: 1px;
margin-right: 100px;
}
.red-juice::-webkit-slider-runnable-track {
-webkit-appearance: none;
height: 20px;
}
.red-juice::-webkit-slider-thumb {
-webkit-appearance: none;
background: red;
/*thumbColor*/
width: 15px;
/* thumbHeight + (2 x thumbBorderWidth)*/
height: 15px;
/* thumbHeight + (2 x thumbBorderWidth)*/
border-radius: 100%;
margin-top: 1px;
/* -[thumbHeight + (2 x thumbBorderWidth) - trackHeight]/2*/
cursor: pointer;
border: 0px solid #fff;
/*border-width should be equal to thumbBorderWidth if you want same border width across all browsers and border-color should match the background*/
transition: 0.3s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Netflix video player</title>
<link rel="stylesheet" href="https://cdnjs.cloudlflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="c-video">
<video class="video" src="https://www.w3schools.com/html/mov_bbb.mp4"></video>
<div class="controls">
<div class="red-bar">
<!--
inputs are self-closing tags. You don't need a closing tag for it!
Self-closing tags are single tagged elements - you only need to
add a slash before '>', like so: <input />
-->
<input class="red-juice" type="range" min="1" max="100" step="1" value="1" />
</div>
</div>
<div class="buttons">
<button id="play-pause"></button>
</div>
<div class="title"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>