tratando de descubrir cómo escribir la parte JS para permitir que el control deslizante se mueva con el paso del tiempo. ayúdame a descubrir cómo hacer este código a continuación.
He cancelado el atributo de controles de la etiqueta de video, así que cree controles personalizados para el video. Hizo controles personalizados usando iconos fontawesome y el control deslizante y la pista de wibkit. No puedo entender cómo manipular los controles personalizados para el control deslizante dinámicamente con JS.
const VisVideo = document.querySelector("video"); const range = document.querySelector("input"); const play = document.querySelector(".play"); const pause = document.querySelector(".pause"); const stoper = document.querySelector(".stop"); input[type="range"]{ -webkit-appearance: none; width: 100%; background:transparent; } input[type="range"]::-webkit-slider-thumb{ -webkit-appearance: none; height: 18px; width: 8px; border-radius: 2px; border: none; background-color: lightgrey; cursor: pointer; padding-left: 1px; margin-top: -6px; box-shadow: 1px 1px 1px #111; } input[type="range"]::-webkit-slider-runnable-track{ width: 100%; height: 5px; margin: 0 0.2rem; cursor: pointer; background: rgb(63, 93, 228); box-shadow: 1px 1px 1px #111; <body> <div class="screen"> <img src="poster.png"/> <video class="video"> <source src="gone.mp4" /> </video> </div> <div class="play "> <i class="fa-solid fa-play"></i> </div> <div class="pause "> <i class="fa-solid fa-pause"></i> </div> <div class="stop "> <i class="fa-solid fa-stop"></i> </div> <input type="range" step="1" min="0" max="100" value="0" /> </body>