我正在寻求帮助,因为我目前被困在一个脚本上。
让我解释一下:我在一个页面上有一个 html5 音频播放器,以及一个作用于值“id”.audio 的 slider ,使用 jquery ui 库制作..
当我们对 slider 进行操作时,音频值会自动更改,播放器的值也会自动更改,但是当我们对播放器的 slider 进行操作时,使用 jquery 实现的( slider )不会更改,除非您在加载之前更改值剧本 ...
总之,我想知道如何使 slider 自动更新,具体取决于 html5 音频播放器。
这是脚本:
$(function() {
//Store frequently elements in variables
var slider = $('#slider'),
tooltip = $('.tooltip');
//Hide the Tooltip at first
tooltip.hide();
//Call the Slider
$(window).load(function(){
slider.slider({
//Config
range: "min",
min: 0,
max: 1,
animate: true,
value: audio1.volume,
step: 0.01,
start: function(event,ui) {
tooltip.fadeIn('fast');
},
//Slider Event
slide: function(e, ui) { //When the slider is sliding
var value = slider.slider('value'),
volume = $('.volume');
audio1.volume = ui.value;
if(value <= 0.05) {
volume.css('background-position', '0 0');
}
else if (value <= 0.25) {
volume.css('background-position', '0 -25px');
}
else if (value <= 0.75) {
volume.css('background-position', '0 -50px');
}
else {
volume.css('background-position', '0 -75px');
};
},
stop: function(event,ui) {
tooltip.fadeOut('fast');
},
});
});
});
在此先感谢并为我的英语(不是我的母语)感到抱歉,
奥雷连
最佳答案
我认为您只需要将值在两个方向上绑定(bind)在一起,这是一个基于我一直在研究的视频播放器的简单示例。
Working Example
$(function () {
var seeksliding;
var createSeek = function () {
if ($('#audio').prop('readyState')) {
var audio_duration = $('#audio').prop('duration');
$('#seekSlider').slider({
value: 0,
step: 0.01,
orientation: "horizontal",
range: "min",
max: audio_duration,
animate: 200,
slide: function () {
seeksliding = true;
},
stop: function (e, ui) {
seeksliding = false;
$('#audio').prop("currentTime", ui.value);
}
});
}
};
createSeek();
var seekUpdate = function () {
var currenttime = $('#audio').prop('currentTime');
if (!seeksliding) $('#seekSlider').slider('value', currenttime);
};
$('#audio').bind('timeupdate', seekUpdate);
});
关于jquery - 如何自动更新音频 slider jquery ui,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23405835/