jquery - 带有 jMediaelement 的垂直音量滑块

Question

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

在调用 jMediaelement API 时，我只能使用这个标记：

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

...它将被水平音量滑块取代。如何将音量手柄调整为垂直（从底部=静音到顶部=响亮）？

PS：我已经在 Sourceforge 打开了一个问题，但是还没有答案。

Answer 1

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

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

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

Answer 2

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

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

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

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

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