Question

我设法在CSS中将原始水平音量滑块更改为垂直样式，但是音量滑块仍然可以像水平一样运行，即我必须水平单击才能更改音量，而不是垂直。 / p>

HTML

<div class="jp-volume-bar wolf-volume">
                        <div class="jp-volume-bar-value"></div>
                    </div>

CSS

    .wolf-jplayer-playlist .wolf-volume{
    display:none
}

.wolf-jplayer-playlist .jp-volume-bar{
    position:absolute;
    height: 50px;
  width: 5px;
    padding:0;
    overflow:hidden;
    top:85px;
    left:278px
}

.wolf-jplayer-playlist .jp-volume-bar:hover{
    cursor:pointer
}

.wolf-jplayer-playlist .jp-volume-bar-value{
    height: 300px;
    width: 20px;
    background-color: #db2537
}

Jquery（很长的代码）：

http://djacademynegypt.com/wp-content/plugins/wolf-jplayer/assets/js/min/jquery.jplayer.concat.min.js?ver=2.1.7.3

Answer 1

使用jQuery UI Slider：

example

要真正更改音量，您需要与“幻灯片”回调中的jPlayer API进行互动：

$(".jp-volume-bar").slider({
   orientation: 'vertical',
   slide: function(event, ui) {      
      $(".jp-volume-bar-value").text(ui.value);
      $("#jpId").jPlayer("volume", ui.value/100); // jpId is the player id
   }
});

HTML：

<div class="jp-volume-bar wolf-volume"></div>
<div class="jp-volume-bar-value"></div>

full example here.

如何垂直更改音量

1 个答案: