JQuery - porblema con slider jquery

 
Vista:
Imágen de perfil de danilo
Val: 1
Ha aumentado su posición en 168 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

porblema con slider jquery

Publicado por danilo (1 intervención) el 04/11/2016 14:59:55
Hola amigos y programadores del foro, hoy vengo a consultarles ya que estoy en un proyecto el cual en un modulo tiene una sección de vídeo y en ella necesito controlar el tiempo del mismo, para eso implemente los sliders de jquery o tambien conocida como barra de tiempo, ella me lleva al tiempo normalmente pero lo unico que me falta es que cuando me pare sobre alguna parte del slider el me marque a que tiempo del video me va a llevar.

este es el html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Gradient [deg] v2</title>
 
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
 
  <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
 
      <link rel="stylesheet" href="css/style.css">
 
 
</head>
 
<body>
  <div id="player"></div>
<br />
<br />
<p id="content"></p>
<div id="range"></div>
 
<p id="volume-amount"></p>
<div id="volume-range"></div>
<br />
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
 
      <script src="js/index.js"></script>
 
</body>
</html>

este es el js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
String.prototype.toHHMMSS = function() {
  var sec_num = parseInt(this, 10);
  var hours = Math.floor(sec_num / 3600);
  var minutes = Math.floor((sec_num - (hours * 3600)) / 60);
  var seconds = sec_num - (hours * 3600) - (minutes * 60);
 
  if (hours < 10) {
    hours = "0" + hours;
  }
 
  if (minutes < 10) {
    minutes = "0" + minutes;
  }
 
  if (seconds < 10) {
    seconds = "0" + seconds;
  }
 
  var time = hours + ":" + minutes + ":" + seconds;
  time = time.replace(/^0+/, '');
  time = time.replace(/^[^\w\s]/gi, '');
  return time;
}
 
$("#range").slider({
  range: "min",
  slide: function(event, ui) {
    player.seekTo(ui.value,true);
    return false;
  }
});
 
$("#volume-range").slider({
  range: "min",
  value: 50,
});
 
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
 
function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '282',
    width: '502',
    videoId: 'QExOaGT_ids',
    playerVars: {
      'controls': 0,
      'showinfo': 0,
      'iv_load_policy': 3,
      'rel': 0,
    },
    events: {
      'onReady': onPlayerReady,
    }
  });
}
 
setInterval(function() {
  $("#content").text("video_time: " + player.getCurrentTime().toString().toHHMMSS());
 
  $("#range").slider("value", player.getCurrentTime());
  //var tiempo = player.getCurrentTime();
  $("#range").slider("option", "max", player.getDuration());
 
}, 1000);
 
setInterval(function() {
    // VOLUME CONTROLS
  $("#volume-amount").text("volume: " + player.getVolume() + "%");
  player.setVolume($("#volume-range").slider("value"));
}, 1);
 
function onPlayerReady(event) {
  // auto-play video
  event.target.playVideo();
}
 
$(document).ready(function() {
  // READY
});

este es el css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
body {
  background-color: #292c2f;
  font-family: monospace;
  overflow: hidden;
}
 
#player {
  margin-top: 10px;
  margin-left: 10px;
  outline: none;
}
 
#content {
  color: #fff;
  margin-left: 13px;
}
 
#range {
  width: 502px;
  border: 0;
  height: 5px;
  background: #424242;
  outline: none;
  margin-left: 10px;
  margin-top: 10px;
}
 
#range:hover {
  margin-top: 9px;
  height: 8px;
}
 
#range:hover .ui-slider-handle {
  margin-top: 2px;
  opacity: 1;
}
 
#range .ui-slider-handle {
  margin: 0px 0 0 -7px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #fff;
  border: 0;
  height: 14px;
  width: 14px;
  outline: none;
  cursor: pointer;
  opacity: 0;
}
 
#range .ui-slider-range {
  background: #4ac1ff;
}
 
/* VOLUME */
 
#volume-range {
  width: 200px;
  border: 0;
  height: 5px;
  background: #424242;
  outline: none;
  margin-left: 10px;
  margin-top: 10px;
}
 
#volume-range:hover {
  margin-top: 9px;
  height: 8px;
}
 
#volume-range:hover .ui-slider-handle {
  margin-top: 2px;
  opacity: 1;
}
 
#volume-range .ui-slider-handle {
  margin: 0px 0 0 -7px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #fff;
  border: 0;
  height: 14px;
  width: 14px;
  outline: none;
  cursor: pointer;
  opacity: 0;
}
 
#volume-range .ui-slider-range {
  background: #4ac1ff;
}
 
#volume-amount {
  color: #fff;
  margin-top: 50px;
  margin-left: 10px;
}


Les agradezco mucho lo que puedan hacer por mi :D
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder