Hi All,
I am using slider control to create a progress bar for media player.
Problem:
the max value and slider size is not matching. The video get complete before it reaches the end of the slider.
Code:
<script type="text/javascript" src="js/jquery.ui.core.js"></script>
<script type="text/javascript" src="js/jquery.ui.slider.js"></script>
<link type="text/css" href="CSS/demos.css" rel="stylesheet" />
<link type="text/css" href="CSS/jquery-ui.css" rel="stylesheet" />
$('#slider-constraints').slider("value", 0);
$('#slider-constraints').slider("constraints", [0, 0]);
$("#slider-constraints").slider({
max: document.
mediaPlayer.SelectionEnd,
animate: true,
range: $R(0, document.
mediaPlayer.SelectionEnd),
values:(0,document.
mediaPlayer.SelectionEnd),
value: val,
enforceConstraints: false,
slide: function(event, ui) {
document.
mediaPlayer.currentPosition = ui.value;
$('#slider-constraints').slider("constraints", [0, ui.value]);
$('#slider-constraints').slider("value", ui.value);
},
start: function(event, index) {
document.
mediaPlayer.currentPosition = index.value;
$('#slider-constraints').slider("constraints", [0, index.value]);
$('#slider-constraints').slider("value", index.value);
}
});
}
// Haldler position
window.setInterval(function() {
if (document.
mediaPlayer.PlayState != 2 && document.
mediaPlayer.PlayState == 0) {
$('#slider-constraints').slider("constraints", [0, 0]);
$('#slider-constraints').slider("value", 0);
}
else {
$('#slider-constraints').slider("constraints", [0, document.
mediaPlayer.currentPosition]);
}
}, 3000);
// Progressbar position
window.setInterval(function() {
if (document.
mediaPlayer.PlayState != 2 && document.
mediaPlayer.PlayState == 0) {
$('#slider-constraints').slider("constraints", [0, 0]);
$('#slider-constraints').slider("value", 0);
}
else {
$('#slider-constraints').slider("value", document.
mediaPlayer.currentPosition);
}
}, 3000);
}
<div id="slider-constraints" > </div>
