教程:如何制作MPV-EASY Player/MPV Player的OSC外观样式

如果你喜欢使用MPV播放器，那么对于它默认的OSC（播放控制界面）外观样式肯定是不会满意的，毕竟黑白的色调和不协调的元素大小并不能评价为:美观。幸运的是通过修改一个脚本文件，就可以创造出一个全新外观样式的OSC，这篇文章则会教会你如何修改。

整个修改过程会尽量的简单易懂，从而极大的降低制作难度。

由于MPV-EASY Player就是一个MPV Player，所以在OSC外观样式方面2者完全一样，你制作的OSC外观样式无需任何修改2个播放器都可以用来使用，用法也是完全的类似。

如果你使用过MPV-EASY Player，阅读过【MPV-EASY设置界面】-【OSC】-【使用非默认外观样式】的那一大段提示内容，就会会知道想要调整或者制作OSC外观样式只需要修改OSC.lua这个文件即可。

如果你是MPV用户，请查看

https://github.com/422658476/MPV-EASY-Player

页面上的教程，从而可以知道如何获取、使用这个OSC.lua文件。

OSC.lua这个文件的主要功能就是程序运行的时候在视频界面上画出播放控制界面，并且根据你鼠标的点击做出相应的行为，所以按钮，进度条、背景色等这一整块区域中能够看到的东西都是由这个文件创建的。

但是当你打开这个文件想要开始修改OSC外观样式时，就会出现下方这个熟悉的不能在熟悉的表情：

因为MPV组织者给这个文件写了2400多行的代码，而且为了保持灵活使用了各种复杂的计算来控制各个元素(按钮、进度条)的位置，你根本就不知道如何下手，是的，一开始香蕉也是这样。

所以，这个教程是以软件No1修改过的OSC.lua文件作为基础的，这个修改过的OSC.lua文件主要解决了以下这些问题：

1、代码的可维护性。OSC.lua这个文件MPV官方为了改进可能会添加新的代码，修改过的代码迁移到新的OSC.lua文件中时一定要简单，修改的代码也是越少越少，越集中越好，避开那些添加了新代码的部分，每次迁移不会造成问题和花费你很多时间。

2、代码的易读性。你想要制作的是OSC外观样式，遇到的代码肯定越少越好，越简单越好，越容易理解越好，毕竟并不是每个人都懂lua脚本，完全要避免从解决外观样式问题转而去解决代码的问题,你也肯定不想过了1个星期就不知道当初的代码是怎么改的。

3、极大的降低了外观样式制作的复杂性。尽可能做到傻瓜化，通俗易懂，只需要简单尝试就能够获得你需要的样式和效果，使用很少的时间就可以完成制作。

修改过的OSC.lua文件下载地址，这个OSC.lua也就是MPV-EASY Player的默认外观样式文件：

https://github.com/422658476/MPV-EASY-Player/tree/master/tutorial

OSC.lua原始文件下载地址：

https://github.com/mpv-player/mpv/tree/master/player/lua

教程开始：

1、从一个正常人的逻辑来说，当你想要制作一个OSC外观样式时，肯定已经在脑子里描绘出了它的大概样子，所以第一步也就是把你想要制作的OSC外观样式在图片编辑器里画出来，直到调整到最满意的色彩效果和布局效果。

如果这一步忽略的话，当你完成所有步骤，往往会发现调整后的外观样式和你理想的差十万八千里，结果就是花费了很多精力却什么都没有得到。

教程以MPV-EASY Player默认的OSC外观样式为例子，它在图片编辑器里的效果是这样的。

2、完成之后，你会问怎么在这个OSC.lua中画出这些播放图标、进度条等东西？只有一个文件，不能使用图片，难道要我写代码写出来？

当然不是。实际上这些图标、进度条等元素已经帮你都准备好了，你要做的只是调节这些图标，进度条等元素的颜色、xy轴坐标、大小、宽度、高度即可。

3、那MPV-EASY Player/MPV Player的OSC外观样式中已经定义、能够调用的元素有哪些呢？

从下面这张图中可以看到，一共17个元素组成了OSC，有些元素不需要的话可以不显示（使用【–】符号注释对应的行，或者删除对应代码），熟悉之后你自己可以创建更多额外的样式，比如添加一点线条。

4、接下来我们可以开始编辑【OSC.lua原始文件】了。下载【修改过的OSC.lua】【OSC.lua原始文件】2个文件一起看就可以看到下方的这些改动，通过对比【修改过的OSC.lua】和【OSC.lua原始文件】，就可以知道修改和删减了哪些部分。

通常我们修改【box】样式，因为这个样式最容易修改，并且内容最丰富，首先我们当然要把OSC的宽度和高度调整到你需要的值，才能往里面添加元素。

使用notepad++等带有高亮功能的高级文本编辑器打开【OSC.lua原始文件】，使用编辑器的查找功能搜索【layouts[“box”] = function】，就可以跳到box样式代码所在位置。

修改下图中 w= h= 后面的值即可， 例子中的OSC就是宽1100像素、高65像素，当然这个1100*65像素的区域使用肉眼是看不见摸不着的，它是一个透明的容器，其他2个改成0即可。

5、接下来我们肯定要给这个容器添加一个背景，好让我们看见，所以向下滚动约40行代码，就可以看到这些文字：

--
-- Background box
--

从文字中就可以看到，下方代码肯定是修改box样式的背景，如下图所示，还是修改 w= h= 后面的值，建议和容器的宽高一样，例子中容器是110065像素，所以背景也应该填满容器，也是110065像素，需要注意的是，图中【OSC_styles.】后方的内容现在不要碰，不要改（第7步才会改动此处），因为现在还没有添加那些样式，如果你读的懂这些代码，你会发现这步多此一举，但多此一举还是做了吧。

6、修改完成之后，我们肯定要看一下效果，软件No1建议每次修改后都要看下效果，因为如果修改过程中出现错误，比如多了少了个逗号，会导致lua文件运行出错，整个osc都看不见了。

这个你调整后的【OSC.lua原始文件】重命名成比如【my-osc.lua】,后放入MPV-EASY Player的data\mpv-easy-data\osc-style文件夹，使用【MPV-EASY设置.exe】-【osc】-勾选【使用非默认osc外观样式】，并用【选择】功能选择【my-osc.lua】，【OSC样式:】的值改成【box】，点击【确定】按钮，重新运行MPV-EASY Player就可以看到变化。

你会发现osc区域变长了，变矮了。

7、 继续编辑【my-osc.lua】，把【修改过的OSC.lua】中的三部分内容添加和替换【my-osc.lua】中的对应内容，就像下图中的那样，内容的定位也非常简单，参考上方和下方的文字即可。

注意，由于文件中默认有4种样式，所以一共存在4个【– Background box】，所以你一定要定位到【layouts[“box”] = function】下方的那个【– Background box】。

【layouts[“box”] = function】下方【– Title row】到【layouts[“slimbox”] = function () 】之间的替换内容大概有100行。

8、替换完毕之后，【my-osc.lua】就会变的和【修改过的OSC.lua】一摸一样了，你可以从替换教程中知道哪些部分做了改变，如果今后发现【OSC.lua原始文件】更新了，代码有变动，只要代码在这些替换内容之外就可以忽略，如果在这些替换内容之内，你可以尝试忽略这些新代码或者稍微改进即可让新代码正常工作。

9、再次执行第6步，检测代码是否正常工作，请勿忽略第6步中的任何一步，除非你知道可以忽略它。

10、接下来的这张图表明的是【my-osc.lua】中修改了的代码和第3步中各个元素之间的关系。

11、看了上图之后，你应该基本明白了，添加对应的代码就会显示对应的元素，之后你只需要设定每个元素相对于OSC界面左上角的坐标就可以改变它显示的位置了。

我们可以默认OSC界面左上角的坐标为(0,0),当元素坐标是(0+5,0+6)的时候，也就是元素的位置相对于(0,0)向右移动5个像素，向下(不是向上)移动6个像素。

你会发现每个元素基本对应三行代码（进度条除外）。

我们以【暂停/播放】按钮这个元素为例：

lo = add_layout("playpause")   
lo.geometry = {x = rjno1X + ***, y = rjno1Y + ***, an = 5, w = ***, h = ***}
lo.style = osc_styles.rjno120Buttons 

上方第1行代码添加后osc界面上就会显示【暂停/播放】按钮

上方第2行代码主要是对【暂停/播放】按钮进行定位，【暂停/播放】按钮占用多少长宽的区域。

上方第3行代码主要指定【暂停/播放】按钮的样式：使用什么颜色、按钮的大小。

---

我们在对【暂停/播放】按钮这个元素更为仔细的举例：

当3行代码写成：

lo = add_layout("playpause")
lo.geometry = {x = rjno1X , y = rjno1Y , an = 5, w = 30, h = 20}
lo.style = osc_styles.rjno120Buttons

时，(仅改动第二行)

其中的【rjno1X】,【rjno1Y】指的就是OSC界面左上角的坐标(0,0)，【暂停/播放】按钮现在就显示在OSC界面左上角，占用30*20像素的区域，所以你会发现每个元素的坐标轴是都带有【rjno1X】,【rjno1Y】，因为每个元素的定位都是从OSC界面左上角开始计算。

当3行代码写成：

lo = add_layout("playpause")
lo.geometry = {x = rjno1X + 5, y = rjno1Y + 6 , an = 5, w = 30, h = 20}
lo.style = osc_styles.rjno120Buttons

时，(仅改动第二行)

【暂停/播放】按钮显示的位置就会从之前OSC界面左上角向右移动5个像素，向下移动6个像素。

---

当你知道这些变化之后，你就可以在【my-osc.lua】中进行实践和观察变化了：

打开【my-osc.lua】，找到这3行代码所在的位置，把第二行改成

lo.geometry = {x = rjno1X , y = rjno1Y , an = 5, w = 30, h = 20}

，保存后执行第6步，会发现【暂停/播放】按钮出现在了左上角。

在打开【my-osc.lua】，找到这3行代码所在的位置，把第二行改成

lo.geometry = {x = rjno1X + 5, y = rjno1Y + 6, an = 5, w = 30, h = 20}

，保存后执行第6步，会发现【暂停/播放】按钮在之前的位置上向右向下移动了5和6个像素。

好奇的你肯定会问第二行中【an=值】有什么用，最简单的方法就是只改变这个值，看元素在位置上的变化，an的值的范围是1到9，如果值超出这个数字，会导致OSC界面消失，发生这种情况改回1到9即可。

lo.geometry = {x = rjno1X , y = rjno1Y , an = 1, w = 30, h = 20}保存后执行第6步，记住位置

lo.geometry = {x = rjno1X , y = rjno1Y , an = 5, w = 30, h = 20}保存后执行第6步，观察位置

lo.geometry = {x = rjno1X , y = rjno1Y , an = 9, w = 30, h = 20}保存后执行第6步，观察位置。

你会发现像图上这种变化，an = 5时，【暂停/播放】按钮的中心会作为坐标(0,0)的坐标点，当an = 1，an = 9时，【暂停/播放】按钮的左下角，右上角会成为(0,0)的坐标点，所以定位之后，还需要根据an的值对定位进行修正，如果你不擅长这个，那么照抄【修改过的OSC.lua】中已经修改过的值，不要改变或者进行较少改变，这样调整比较容易。

并且当an对文字元素进行定位时，an=5时，文字居中显示，文字数量增加则会从中心往2边增加宽度，an=1时，文字是左对齐向右增加，an=9时文字右对齐向左增加。

12、更改元素的背景色，大小。我们还是以上方的【暂停/播放】按钮为例：

lo = add_layout("playpause")
lo.geometry = {x = rjno1X + 5, y = rjno1Y + 6 , an = 5, w = 30, h = 20}
lo.style = osc_styles.rjno120Buttons

上方第三行代码主要指定【暂停/播放】按钮的样式：使用什么颜色、按钮的大小，但是你从文字上看不出这些内容，那么这些设定的值在哪边呢？

记得第7步时，你往【my-osc.lua】的【local osc_styles = {】下方添加了10行代码，其中有一行是：

rjno120Buttons = "{\blur0\bord0\1c&HCBCBCB\3c&HFFFFFF\fs20\fnmpv-osd-symbols}",

没错，当lo.style = osc_styles.后方的值是【rjno120Buttons】时，就会去自动获取【rjno120Buttons】 =后面填写的颜色值、元素大小的值等等等等。

【local osc_styles = {】下方10行，每一行定义的都是一组不同的颜色，元素大小等值，你可以根据自己的要求添加更多的行数，只需要每一行【=】号左边的名字不同即可。

以此类推，当你想要【暂停/播放】按钮使用这行的颜色值、元素大小的值时：

rjno150Buttons = "{\blur0\bord0\1c&HCBCBCB\3c&HFFFFFF\fs25\fnmpv-osd-symbols}",

【=】号左侧是【rjno150Buttons】，那么原先三行只需要改成(只变动了第三行)：

lo = add_layout("playpause")
lo.geometry = {x = rjno1X + 5, y = rjno1Y + 6 , an = 5, w = 30, h = 20}
lo.style = osc_styles.rjno150Buttons

13、当你明白这些之后，剩下就是体力活了，定义每个元素的xy轴，微调坐标位置，选择每种元素使用哪一行的颜色值、元素大小的值即可。

14、如何理解【local osc_styles = {】下方，这些代表样式的行【=】号后面的值：

以

rjno150Buttons = "{\blur0\bord0\1c&HCBCBCB\3c&HFFFFFF\fs25\fnmpv-osd-symbols}",

为例，

每一行后面的值都是用ASS 字幕格式规范表示的，每个值之间用【\】符号隔开，ASS 字幕格式规范参考：

https://github.com/weizhenye/ASS/wiki/ASS-%E5%AD%97%E5%B9%95%E6%A0%BC%E5%BC%8F%E8%A7%84%E8%8C%83

例子中的值包括：

• blur0：高斯模糊值为0，也就是不高斯模糊
• bord0：边框为0，如果是bord1，那么就显示1像素宽度的边框，但OSC界面中好像只有OSC背景和OSC进度条背景才支持显示边框
• 1c&HCBCBCB：元素颜色是CBCBCB，主要更改这个值，【1c&H】这4个字符请勿修改
• 3c&HFFFFFF：元素边框颜色是FFFFFF，【3c&H】这4个字符请勿修改
• fs25：元素大小25像素，如果元素是文字的话，主要更改这个值，文字字体大小为25
• fnmpv-osd-symbols：不需要看，照抄即可

---

注意点：

当你使用取色器取到你想要的颜色的值后添加到1c&H或者3c&H后方时，你会发现显示的颜色和你预期的颜色根本不一样，这是为什么？

通常情况下，取色器中获取的颜色的值的顺序为RRGGBB，而ASS字幕格式规范中的值的顺序确是倒过来表示为BBGGRR，那么如何解决这个问题？

比如，取色器中你获取的一种蓝色的值是#3942f7,也就是代表RR=39,GG=42,BB=f7，当你把这个颜色值放到1c&H或者3c&H后方时就要变成：

#3942f7
1c&Hf74239
3c&Hf74239 

也就是把39和f7调换下位置。

本文地址：https://www.rjno1.com/modify-mpv-osc-style/