带有 jMediaelement 的垂直音量滑块答案

【问题标题】：Vertical volume slider with jMediaelement带有 jMediaelement 的垂直音量滑块
【发布时间】：2015-02-02 01:39:54
【问题描述】：

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

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

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

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

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

【问题讨论】：

标签： jquery html html5-audio

【解决方案1】：

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

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

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

【讨论】：

老实说，使用 CSS3 旋转元素似乎产生的问题多于解决的问题。从 IE8 开始，过时的浏览器怎么办？
我贴的文章中提到了，你可以用IE的过滤器来完成。不过，似乎另一个答案要容易得多。

【解决方案2】：

幸运的是，Alexander replied 亲自回答了这个问题。这是他的工作解决方案：

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

以下 css 将创建一个垂直滑块：
.volume-slider {
    height: 300px;
    width: 20px;
}
如果这没有帮助，您可以将垂直选项传递给滑块。

【讨论】：