滚动自定义控制按钮答案

【问题标题】：Rolling custom control buttons滚动自定义控制按钮
【发布时间】：2011-11-09 03:00:04
【问题描述】：

你有关于为 mejs 自定义皮肤图形/css 的参考或教程吗？

这是我破解的：

我复制了mejs-skins.css 文件中的mejs-ted 块并将其元素重命名为mejs-custom。我创建了一个类似于现有control-ted.png 的新PNG 文件，并记下每个控件的坐标。使用这些坐标，我更改了 mejs-custom 中的 x/y 偏移量（我也确实可以使用帮助）。

但是现在如何激活这个皮肤呢？您能否确认上述技术是创建皮肤的正确程序？

http://mediaelementjs.com 源具有可切换的皮肤，但切换机制在代码中被很好地混淆了，并且 mu 分发的 demos 部分中缺少 mediaelementplayer-skins.html 文件。

【问题讨论】：

我认为 changeSkin() 是关键......我是否应用不正确？成功：函数（mediaElement，domObject）{ mediaElement.changeSkin('mejs-custom'); mediaElement.play(); },
我没有像上面描述的那样切换皮肤，而是破解了默认mediaelementplayer.css中的.mejs-controls项目。通过更改.mejs-controls .mejs-button button 的高度/宽度，并修改各种元素的background-position:，您可以想出一个相当基本的自定义皮肤近似值。
这变成了多么可怕的一团糟。我必须得出结论，mediaelement.js 不适合像我这样的热心的业余爱好者，而是留给铁杆极客使用。

标签： mediaelement mediaelement.js

【解决方案1】：

设置你的播放器，然后使用changeSkin()方法将你的皮肤类添加到容器div中，这反映在你的皮肤css文件中

 var player = new MediaElementPlayer('#player-ID');


   player.changeSkin('skin-container-class');

然后你就可以设置所有元素的样式了。

.skin-container-class .mejs-controls {
/*stylez*/
}

【讨论】：