hola lo que pasa es que en la barra de progreso del tiempo del video estoy intentando hacer que cuando la presione en algun lado de la barra se me vaya a ese instante del video , pero llevo 2 dias haciendo esto y no me cuadra he intentado con varias cosas pero no he podido , agradeceria que alguien me ayudara , en la funcion llamada adelant debe ir esta accion muchas gracias
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>