我正在使用 jPlayer插件以及 jQuery UI 的 slider小部件。一切似乎都已设置好,但在上下拖动音量时我似乎遇到了一些麻烦。以任何一种方式拖动都会使音量跳得太高/太低。该功能是通过 slide
属性控制的,我只是不确定如何让它相应地拖动。
最佳答案
问题:
由于您为 jp-volume-bar-knob
设置了 position: absolute
,因此 ui-slider-horizontal
栏失去了宽度( slider 滑动的水平条)。
选项 1:
与其将 slider 应用于 jp-volume-bar-knob
,不如尝试将其应用于 jp-volume-bar
,它似乎工作正常。
这是更新后的演示 http://jsfiddle.net/dhirajbodicherla/9co0ac65/2/
但是,必须设置初始音量级别和初始 slider 值。
选项 2:
您可以设置以下 css 并仍然将 slider 应用于 jp-volume-bar-knob
.ui-slider-horizontal{
height: 0;
border: transparent;
width: 100%;
}
这是演示 http://jsfiddle.net/dhirajbodicherla/9co0ac65/3/
更新
尝试这样的事情
- 在此音量条工作正常。
- 在 slider 上复制了默认值。
$(document).ready(function () {
var myPlayer = $("#jquery_jplayer_1"),
options = {
ready: function (event) {
if (event.jPlayer.status.noVolume) {
// if there is no volume add custom styling
}
// Setup the player with media.
$(this).jPlayer("setMedia", {
title: "Bubble",
m4a: "http://jplayer.org/audio/mp3/Miaow-07-Bubble.mp3",
oga: "http://jplayer.org/audio/ogg/Miaow-07-Bubble.ogg"
});
},
volumechange: function (event) {
if (event.jPlayer.options.muted) {
myControl.volume.slider("value", 0);
} else {
myControl.volume.slider("value", event.jPlayer.options.volume);
}
},
swfPath: "http://jplayer.org/latest/dist/jplayer",
supplied: "mp3, oga",
wmode: "window",
useStateClassSkin: true,
autoBlur: false,
smoothPlayBar: true,
keyEnabled: true,
remainingDuration: true,
toggleDuration: true
},
myControl = {
volume: $(".jp-volume-bar-knob")
};
// Instance jPlayer
myPlayer.jPlayer(options);
myControl.volume.slider({
animate: "fast",
max: 1,
range: "min",
step: 0.01,
value: $.jPlayer.prototype.options.volume,
slide: function (event, ui) {
myPlayer.jPlayer("option", "muted", false);
myPlayer.jPlayer("option", "volume", ui.value);
}
});
});
我从 jplayer demo 中采用了这个并根据问题进行了一些修改。
这是更新后的演示 http://jsfiddle.net/dhirajbodicherla/9co0ac65/6/
更新2
将音量条标记更改为类似这样的内容
<div class="jp-volume-bar"></div>
与其更改所有 .jp-* 的
css,不如将 jquery-ui 的
css 更改为这样的内容
.ui-slider-horizontal{
background: #444;
cursor: pointer;
display: inline-block;
position: relative;
height: 4px;
width: 100px;
}
.ui-slider-range{
background: #cc181e;
}
关于javascript - 使用 jQuery UI 和 jPlayer 控制音频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30016729/