hi what happens is that in the progress bar of the time of the video I'm trying to make that when I press it somewhere on the bar I'm going to that moment of the video, but I've been doing this for 2 days and it does not fit me I have tried several things but I have not been able to, I would appreciate someone helping me, in the function called forward this action should go a lot of thanks
function multimedia() {
let video = document.querySelector("#vid");
let play_pause = document.querySelector("#play");
let current = document.querySelector("#current");
let volum = document.querySelector("#volum");
let changeSound = document.querySelector(".change_volume");
let back = document.querySelector("#back_video");
let next = document.querySelector("#next_video");
let progress = document.querySelector("#progress");
let durations = document.querySelector("#duration");
let move_back= document.querySelector("#back");
let move_next= document.querySelector("#next");
video.volume = 0.5;
let change, move = false;
let open = false;
let num_video = 0;
let actual= 1;
let url = ["https://mainline.i3s.unice.fr/mooc/week2p1/video1.mp4",
"https://mainline.i3s.unice.fr/mooc/week2p1/video2.mp4",
"https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.mp4",
"https://mainline.i3s.unice.fr/mooc/jbs.mp4", "https://mainline.i3s.unice.fr/mooc/mi5.mp4",
"https://mainline.i3s.unice.fr/mooc/ff7.mp4", ];
let maximo = 101;
video.src = url[num_video];
function start_pause() {
if (move == false) {
video.play();
play_pause.firstChild.innerHTML = "pause_circle_filled"
play_pause.title = "pause";
var bucle = setInterval(estado, 30);
move = true;
} else if (move == true) {
video.pause();
play_pause.firstChild.innerHTML = "play_circle_filled";
play_pause.title = "play";
move = false;
}
}
function again() {
video.currentTime = 0;
}
function sound() {
if (change == true) {
video.volume = 0.5;
change = false;
volum.firstChild.innerHTML = "volume_up";
} else {
video.volume = 0;
change = true;
volum.firstChild.innerHTML = "volume_off";
}
}
function change_sound(evt) {
let range = document.querySelector(".range_value");
if (open == false) {
changeSound.style.display = 'block';
open = true;
range.addEventListener('input', function(evt) {
let level = range.value;
console.log(level);
video.volume = level;
if (level == 0) {
volum.firstChild.innerHTML = "volume_off";
}
if ((level > 0) && (level <= 0.2)) {
volum.firstChild.innerHTML = "volume_mute";
}
if ((level > 0.2) && (level <= 0.6)) {
volum.firstChild.innerHTML = "volume_down";
}
if (level > 0.6) {
volum.firstChild.innerHTML = "volume_up";
}
});
} else {
changeSound.style.display = 'none';
open = false;
}
}
function back_video() {
if (num_video === 0) {
num_video = 0;
} else {
num_video--;
video.src = url[num_video];
actual--;
play_pause.firstChild.innerHTML = "pause_circle_filled"
move = false;
video.play()
start_pause()
}
}
function next_video() {
if ((num_video >= 0)) {
num_video++;
actual++
video.src = url[num_video];
play_pause.firstChild.innerHTML = "pause_circle_filled"
move = false;
video.play()
start_pause()
}
if (num_video == 6) {
num_video = 0;
video.src = url[num_video];
video.play();
}
}
function estado() {
if (video.ended == false) {
var total = parseInt(video.currentTime * maximo / video.duration)
progress.style.width = total + "%";
}
}
function adelant(position){
if(video.ended==false){
let positions= position.getBoundingClientRect();
}
}
function m_next(){
let actualTime= video.currentTime+10;
video.currentTime=actualTime;
console.log(video.currentTime);
}
function m_back(){
if(video.currentTime>=10){
let actualTime= video.currentTime-10;
video.currentTime=actualTime;
}
else{
video.currentTime==video.currentTime;
}
}
function time(seconds){
let date= new Date(seconds*1000);
var hour= (date.getHours()==0)?23:date.getHours()-1;
var hour = (hour<9)?"0"+hour:hour;
let minute = (date.getMinutes()<9)?"0"+date.getMinutes():date.getMinutes();
let second = (date.getSeconds()<9)?"0"+date.getSeconds():date.getSeconds();
return minute+":"+second;
}
play_pause.addEventListener('click', start_pause);
current.addEventListener('click', again);
volum.addEventListener("dblclick", sound);
volum.addEventListener('click', change_sound);
back.addEventListener('click', back_video);
next.addEventListener('click', next_video);
video.addEventListener('ended', next_video);
durations.addEventListener('click', adelant);
move_next.addEventListener('click',m_next);
move_back.addEventListener('click',m_back);
video.addEventListener('timeupdate',function(evt){
document.getElementById("count1").innerHTML= time(video.currentTime);
});
video.addEventListener('loadedmetadata',function(evt){
document.getElementById("count2").innerHTML= time(vid.duration);
})
}
multimedia() @import url('https://fonts.googleapis.com/css?family=Frijole');
body {
background-color: #57BFBE;
text-align: center;
font-family: 'Frijole', cursive;
}
header {
background: -webkit-linear-gradient(#FFD380, white)
}
.video {
background: #FF5D42;
margin: 0 auto;
max-width: 500px;
padding: 3px;
border-radius: 15px;
outline: 1px solid white;
outline-offset: 10px;
}
video {
border-radius: 15px;
margin-top: 5px;
max-width: 100%;
}
.times {
max-width: 100%;
height: 20px;
background: black;
border-radius: 15px;
margin-left: 10px;
margin-right: 10px;
text-align: left;
}
.duration {
background: #fff;
height: 20px;
width: 100%;
border: 1px solid black;
}
.progress {
background: #2977C7;
border: 1px solid black;
height: 18px;
width: 0;
border-radius: 0px;
}
.time1, .time2 {
background: white;
border: 1px solid black;
font-size: 0.7rem;
width: 100%;
text-align: center;
height: 20px;
}
.time1 {
border-radius: 10px 0px 0px 0px;
}
.time2 {
border-radius: 0px 10px 0px 0px;
}
.count {
position: relative;
top: 2px;
}
.controls {
border: 1px solid #fff;
max-width: 100%;
height: 30px;
background: black;
border-radius: 0px 0px 15px 15px;
margin-left: 10px;
margin-right: 10px;
}
button {
background: white;
border: 1px solid black;
max-width: 100%;
height: 29px;
}
button:hover{
background:#50C1DD;
}
button:focus{
outline: 0;
}
.back_video {
border-radius: 0px 0px 0px 15px;
}
.zoom {
border-radius: 0px 0px 15px 0px;
}
.change_volume{
display: none;
position: absolute;
background: white;
border:2px solid #50C1DD;
top:-85px;
left: 98px;
float :right;
clear: both;
transform: rotate(-90deg);
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 13.8px 0;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 9px;
cursor: pointer;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border-radius: 5px;
}
input[type=range]::-webkit-slider-thumb {
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
border: 1px solid white;
height: 20px;
width: 15px;
border-radius: 20px;
background: black;
cursor: pointer;
-webkit-appearance: none;
margin-top: -6px;
}
input[type='range'] {
display: block;
width: 120px;
}
input[type=range]::-webkit-slider-runnable-track {
background-color: black;}
input[type=range]::-webkit-slider-runnable-track{
background-image:-webkit-linear-gradient(left, #fff 50%,#50C1DD 50%);
}
@media (max-width:500px) {
button {
padding: 0 !important;
}
.material-icons {
font-size: 15px !important;
}
.time1,.time2{
font-size: 0.5rem;
}
.count{
top:5px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multimedia</title>
<meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="index.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
<div class="container">
<header class="row" id="header">
<div class="col">
<h2>PROJECT HTML5</h2>
<h4>MULTIMEDIA</h4>
</div>
</header><!-- /header -->
<div class=" row rum mt-5">
<div class="col-12 video">
<video id="vid" preload="metadata"><!-- I have three versions of the video encoded with
different codecs. The browser will automatically
choose the first one it knows it can play. --> <source src="https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.webm" type="video/webm"> <source src="https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.ogg" type="video/ogg"> <source src="https://mainline.i3s.unice.fr/mooc/samuraiPizzacat.mp4" type="video/mp4"></video>
<div class="row times">
<div class="time1 col-2 p-0">
<span class="count" id="count1">00:00</span>
</div>
<div class="duration col-8 p-0" id="duration">
<div class="progress" id="progress"></div>
</div>
<div class="time2 col-2 p-0">
<span class="count" id="count2">04:30</span>
</div>
</div>
<div class="controls row">
<div class="col">
<div class="row">
<div class="col-5">
<div class="row">
<button class="back_video col-3" title="back_video" id="back_video"><i class="material-icons">skip_previous</i></button> <button class=" col-3" title="replay" id="current"><i class="material-icons">replay</i></button><button class="next_video col-3" id="next_video" title="next_video"><i class="material-icons">skip_next</i></button> <button class="col-3" id="back"><i class="material-icons">replay_10</i></button>
</div>
</div>
<div class="col-7">
<div class="row">
<button class="play col-4" id="play" title="play"><i class="material-icons">play_circle_filled</i></button> <button class=" col-2" id="next"><i class="material-icons">forward_10</i></button> <button title="Sound" class="volume col-2" id="volum"><i id="volumen_inicial" class="material-icons">volume_up</i></button>
<div class="change_volume">
<div class="range">
<input type="range" class="range_value" min="0" step="0.1" max="1" name="">
</div>
</div>
<button title="Subtitles" class="cc col-2" id="cc"><i class="material-icons">closed_caption</i></button> <button title="zoom"class="zoom col-2" id="zoom"><i class="material-icons">zoom_out_map</i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>