上周，Brightcove 举办了一次内部“黑客周”活动，员工可以自由选择项目进行工作。其中一个成果是新的 Video.js 皮肤设计器。

该设计器允许您在编辑 CSS 时实时查看皮肤的变化，从而更轻松地创建自定义外观。

查看这个看起来很熟悉的示例，它只用了几分钟就完成了：http://codepen.io/heff/pen/wtrHL。

尝试创建您自己的皮肤，并告诉我们您的想法。更好的是，创建您自己的皮肤，在 CodePen.io 上分享，并在评论中发布链接。（这。可能最简单的方法是您从分叉这个未经编辑的示例开始。）

我最喜欢 Video.js 的一点是，皮肤是用 HTML 和 CSS 构建的，同时支持 HTML5 和 Flash 视频。我认为这个设计器很好地展示了自定义播放器。皮肤有多容易。

关于我们如何构建它的一些注意事项…

作为起点，我们使用了 Brian Frichette。出色的 LESS2CSS，这让我们有一个巨大的领先优势。Brian 也主动提出要帮助开发皮肤设计器，因此。太棒了！

我们还没有。在 video.js 中添加 CSS 预处理器，因为我们不。希望有额外的抽象层，或构建过程中的额外步骤。然而，当查看新设计器中的 CSS 时，很明显像变量这样的东西对于帮助人们理解。CSS 中发生了什么有多大的价值。尽管如此，我们。正在努力在 LESS 功能的使用和保持 CSS 对任何只懂 CSS 的人来说都易于阅读之间找到平衡。这意味着要避免使用一些更高级的 LESS 功能，例如条件语句（尽管我们确实用了一个来定位大播放按钮）。

我们选择使用 LESS 是因为它能够在浏览器中用 JavaScript 解析 LESS 标记。我。不了解任何最新的浏览器内 SASS 解析器。LESS2CSS 的完整性也影响了这一决定。我们。正在使用的功能子集足够小，以至于。否则我们使用哪一个并不重要，尽管我确实喜欢用 \$ 而不是 @ 来表示变量。

它。它托管在 Nodejitsu 上，而且我们。正在利用他们的免费开源托管服务。不得不说，使用他们的命令行工具部署应用程序非常简单。

如果您有任何想法，请告诉我们。设计器的代码可以在这里找到：https://github.com/videojs/designer

此致，
-heff