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
este es el js
este es el css
Les agradezco mucho lo que puedan hacer por mi :D
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
0