带有jMediaelement的垂直音量滑块

Question

我正在使用jMediaelement来定制HTML5音频播放器。不幸的是，客户端现在需要一个垂直音量滑块。

调用jMediaelement API时，我只能使用此标记：

 <div class="volume-slider" title="volume slider"></div>

...将被水平音量滑块替换。 如何将音量控制柄调整为垂直（从底部=静音到顶部=响亮）？

PS：我已经开了一个issue at Sourceforge但是，还没有答案。

Answer 1

我不熟悉jMediaelement API，但您可以使用css逆时针旋转音量90度。您可能不得不混淆事件处理程序以使音量控制柄跟踪垂直移动而不是水平移动，但这不应该很难。

这是一篇关于使用CSS旋转的文章

http://davidwalsh.name/css-transform-rotate

Answer 2

幸运的是，亚历山大replied自己提出了这个问题。 这是他的工作解决方案：

  

这很简单。 JME使用jQuery-UI滑块和jQuery-UI   自动检测您想要一个垂直或水平滑块   通过你的CSS。你唯一要做的就是给你的滑块一个   高度大于宽度。

     

以下css将创建一个垂直滑块：

.volume-slider {
    height: 300px;
    width: 20px;
}

     

如果这没有帮助，您可以将垂直选项传递给滑块。