今天 SPlayerX 2018 已经超过 600 多个 Commits 了。这样的提交速度，对代码质量控制的压力很大。

坦白说，之前大部分项目一直很难落实代码审核（CodeReview）流程。对代码质量管理和代码审核（CodeReview），只能停留在提倡和靠自觉的阶段。

这次我启用了 Github 的 Branch Protection 功能，强制项目的所有代码都通过 Pull Request 的方式提交，经过 Review 流程后才能 Merge 合并的管理方式。结果配合利用自动化工具，节省了大量人为额外精力，真是异常的舒适顺畅。

Github 的分支保护（Branch Protection）功能曾经只是防止代码被 Force Push 清掉的防呆机制（Disables force-pushes to this branch and prevents it from being deleted.）。现在则加入了非常棒的辅助代码质量管理的功能，包括：

1. 强制所有提交都通过 Pull Request（Require pull request reviews before merging）。

启用后就不能再直接 Commit 和 Push 代码到被保护的分支上了。而且还能指定至少被几个开发者代码审核才能 Merge ，以及要求必须要项目的所有者（Owner）做代码审核后才能 Merge。

2. 必须通过第三方（例如持续集成 CI 服务、代码质量评估服务、测试覆盖率统计服务）状态检测后才能进行 Merge 合并（Require status checks to pass before merging）

这个功能非常赞。比如说 SPlayerX 2018 这个项目使用了 codecov 做测试覆盖率统计，和 travis 以及 appveyor 做持续集成 CI。现在我就可以保证每个 Pull Request 必须达到更高测试覆盖率标准和能编译成功（CI），否则就无法 Merge 合并。

3. 必须基于最新代码的 Pull Request 才能 Merge（Require branches to be up to date before merging）

4. 只有特定人员或开发者可以直接 Push 代码到被保护的 Branch （Restrict who can push to this branch）

这些自动化措施，可以在多人参与的项目中，技术上保证代码质量控制流程，减少人为的干扰。真是 Code Review 和 质量管控的利器。

Github 与代码质量管理 was originally published in SPlayerX on Medium, where people are continuing the conversation by highlighting and responding to this story.

由于最新的SPlayerX基于Electron + Vue.js框架构建，在图标材质这一方面的实现完全可以使用HTML5和CSS3的一些特性进行处理。

SVG and SVG filter

SVG是一种使用XML定义的可伸缩矢量图形的格式，HTML5允许直接使用<svg>…</svg>标签在文档中插入SVG图像，现在很多图形软件都支持导出svg格式的文件。因此最简单的想法是直接将Sketch中设计好的效果导出，插入在HTML文档中。

测试中，生成的svg图形并不会对其后的背景图像做模糊处理。为进一步确认，在Sketch中单独做一个只添加了background-blur效果的图形并导出成svg，观察代码可以发现，其中并未有任何背景模糊处理的内容。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <rect id="Rectangle" x="0" y="0" width="1011" height="993"></rect>
    </g>
</svg>

其实SVG本身提供了很多用于图像的滤镜即SVG filter，这些滤镜可以在<filter>…</filter>标签中定义，其中就有高斯模糊滤镜feGaussianBlur。但这一滤镜只能应用在给定的图像上，也就是说，若将其使用在图标上，被模糊的是图标本身而非图标后的背景；若将其使用在背景上，为了达到目标效果，则需要对使用了模糊效果的背景做一个图标轮廓的裁切，并在这之后再加一层完全相同的背景图。显然这种方式不适合用在背景为视频的播放器图标上。

backdrop-filter

在BOSS的建议下了解到了backdrop-filter这一CSS属性，它可以将图形特效应用到某一元素之后的区域，譬如对元素后的背景使用模糊滤镜，这就与Sketch中的background-blur非常类似了。同时，为了使效果能够显示，使用了backdrop-filter的元素或其背景必须具有一定的透明度。

backdrop-filter提供的图形特效滤镜有很多，譬如常见的亮度、对比度、饱和度等，甚至还支持引用在svg中定义的滤镜，以此支持更加丰富和灵活的特效。

这个属性的确是我们所需要的，为了确保它能够被正确地运用在视频图标上，还需要考虑两个问题：一、如何将该效果应用在不规则图形上？二、若使用该属性的元素处于播放状态的视频之前，滤镜效果是否能实时渲染？

clip-path

先来解决第一个问题。

如图所示，若将 backdrop-filter:blur(20px); 用在<svg>元素的样式表中，backdrop-filter会对SVG图形整个画布背后的图像做模糊处理。但我们需要的是只对图标形状背后的画面使用滤镜，就必须裁掉这个元素上图标形状以外的部分。

这个时候就需要引入一个新的CSS属性：clip-path。它的作用正如其名，将路径定义的区域从元素中剪切出来，只显示区域内的内容，而区域外的内容被隐藏。最方便的一点是，这个被裁出的区域可以使用定义在svg中的路径，这样我们就可以从一个使用了背景模糊效果的div上将图标轮廓裁出。

<style>
    .effect {
        ...
        background: rgba(255,255,255,.6);
        overflow: hidden;
        clip-path: url(#myClip);
        backdrop-filter: blur(30px);
    }
</style>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <clipPath id="myClip">
            <path d="..."></path>
        </clipPath>
    </defs>
</svg>

最后直接将背景图片换成video标签并插入视频，图标依旧能很好的对播放中的画面做模糊处理，这样第二个问题也就迎刃而解了。

到此为止，在浏览器网页中的Acrylic材质已经实现了大半，接下来还要测试这一方案在Electron框架中的应用效果。

Enable Experimental Web Platform Features

Electron框架使用了Chromium内核，在效果应用到实际项目之前，以上内容均在Chrome浏览器中进行测试。测试过程中曾一度遇到backdrop-filter属性失效的问题，单单升级Chrome仍无法解决。

再次仔细阅读MDN网站上列出的浏览器兼容性表格，在Chrome一栏下发现，尽管Chrome从版本47就开始支持backdrop-filter，但它仍然是一种实验特性，需要在Chrome的设置页面中打开“Enable Experimental Web Platform Features”选项才能看到最终效果。

在Electron中遇到的问题

尝试新特性的过程中总是会面临许多难题。在开启了实验特性的最新版Chrome中能够实现的效果，搬到内核版本还未升级到最新的Electron框架中，便无法正确显示。

尽管backdrop-filter能够对背景视频画面作出处理，但始终存在两个严重的问题：一、backdrop-filter会将应用之后的系统桌面背景也处理进去，在某些状态下能够穿透播放器应用看到桌面上的内容；二、clip-path对经过backdrop-filter处理后的内容无效。

目前猜测问题出现的原因正是Electron的内核版本问题，但是升级内核的成本非常大，在交付日期将近的Pre-alpha Version中已经来不及完成。团队也在不断尝试其他的替代方案，希望能够早日把Acrylic材质带到SPlayerX的用户面前。

如果正在阅读这篇文章的你，也对新设计的应用、新特性的实现有着自己独特的见解，SPlayerX射手影音团队诚挚地欢迎你的加入。

Acrylic 材质实现（下） was originally published in SPlayerX on Medium, where people are continuing the conversation by highlighting and responding to this story.

初识 Acrylic

最开始接触到Fluent Design System的时候（以下简称FDS），这些立方体的质感一下子就把我的目光抓牢了。朴实简单的形状里藏着丰富的层次，表面是哑光又泛出一层温润的光泽，实心纯色却带给人通透的感受。 仿佛是一种介于虚拟与现实之间的材质。

将这样一种材质打薄蒙在其他物体前面，锐利的和刺眼的都会被收敛，留下的只有物体朦胧的轮廓和自然融合的色泽。

官方将这一材质效果命名为“Acrylic”，也就是亚克力的英文。很多人包括我自己在第一次见到应用效果图的时候，都误认为这就是Windows早期的毛玻璃效果。

乍一看的确是与“毛玻璃”材质非常相似，但无论是实物本身、设计实现的方式还是最终呈现的效果，实际都存在着区别。

毛玻璃与亚克力

首先是作为两种特效灵感来源的实物材料，毛玻璃与亚克力的区别。

毛玻璃又称磨砂玻璃，是经机械喷砂、手工研磨或化学处理形成粗糙不规则表面的玻璃；亚克力是音译名，acrylic的真实翻译是丙烯酸塑料，是一种有机高分子材料，具有较好的透光性和展色效果，加工处理后可呈现出半透明或不透明的质地。

简单来说，一个是玻璃，一个是塑料，达到半透明状态的加工方法也不尽相同，当然不可混为一谈。

Win7时期推出的Aero毛玻璃效果，使用的是小半径的高斯模糊和色调调整，而FDS中的亚克力特效，则运用了更加复杂的合成算法。他们在Windows系统应用中的表现，在我看来前者更有立体感和现实感，精致夺目，后者则如一块温润而不张扬的玉石。

高斯模糊

说完区别，再谈谈共性。

无论是毛玻璃的粗糙表面造成的漫反射，还是亚克力染色时混杂在其中的颗粒，最终的结果都是模糊了原本清晰的成像。而作为设计特效来说，两者最大的相同之处也是让大家最容易混淆的原因，就是其中运用的高斯模糊效果。

高斯模糊是一种比普通的均值模糊效果更加平滑的模糊算法，在图像处理软件中被广泛使用，其视觉效果就像通过一个半透明屏幕在观察图像，为整体图像增加了深度感，这也正是毛玻璃和亚克力特效需要达成的效果之一。

其实，抛开Win7特有的毛玻璃特效不谈，现在在很多场合下会直接使用“毛玻璃效果”这一名称来代指高斯模糊效果，尽管这种叫法可能会造成一些误解。

当然，虽然同样是高斯模糊效果，根据取值的不同、或配合以不同的画面调整，最终呈现的效果还是会有细微的差别。

用 Sketch 软件做一个自己的 Acrylic-like 效果

再次回到我最开始接触到这一材质的时候，当即跃跃欲试地想要直接上手画出一个类似的效果图来。

首先进行的尝试是模仿Acrylic材质在立方体上的表现绘制一个带Reveal Highlight效果的播放按钮。

（Reveal Highlight是FDS中另一个重要元素，在本篇中不作赘述）

最终的按钮效果如图，共使用了6个图层对应六种不同的处理。除了参照了Acrylic材质的立方体添加的效果以外，我还试着融入了一些自己对播放图标本身的想法。

由下往上走：

第一层是一个半透明白色的叠加层，对按钮图标为界的背景图案做一个局部提亮；

第二层是作为核心效果的背景高斯模糊；

第三层和第四层分别是白色和黑色半透明填充，使用动态模糊在水平方向延展，想以此营造出一种动态感，不过效果很轻微，黑色的模糊使得图标在纯白背景下也有轮廓；

第五层使用由中心发散的白色到透明的圆形渐变，模拟光照中心，尽量放大减淡并使用图标形状的遮罩限制光照的范围；第六层为图标的轮廓加上极细的渐变描边，渐变中有白、灰和透明的部分，具体的位置需要根据光照角度调节，可以增强图标边缘的锐利感并丰富细节。

这个我戏称为Acrylic-like的效果可以说完全是出于兴趣的产物，实现起来很简单，起主要作用的依旧是高斯模糊。而我认为最有趣的部分，是在这个过程中能体会到高斯模糊以外的那些细节效果对整体观感的影响。正因为这些影响，同是模糊却有不同的名字，而时代会以独特的审美作出选择。

官方提供的 Acrylic 材质设计模板

自己摸索终究是兴趣所致，用在最终的设计上总还是有考虑不周之处，最终还应当参考正确的做法，再结合播放器的需求来实现。FDS官方网站上提供有不同制图软件下Acrylic材质的设计参考模板。

从透明度、模糊和噪点开始，为扁平界面增加视觉深度和维度；排除混合模式层确保材质上的UI控件具有对比度和易读性；着色层提供个性化的选择。将这些层叠加在一起便实现了Acrylic这一新颖而实用的材质。

Acrylic 材质实现（上） was originally published in SPlayerX on Medium, where people are continuing the conversation by highlighting and responding to this story.

截止6月10日，SPlayerX@2018 项目又有了不少进展。包括 7 个 Forks，28 个 Stars。支持了更多的视频格式，也有了更多的交互功能。我们希望能够在6月尽快交付第一个 Pre-alpha Version，所以也会希望更多童鞋加入我们的开发。远程参与项目，也可以快速提高自己的技术水平，学到很多学校中学不到但在工作中会非常有帮助的技巧。一份参与过开源项目的履历，也会被技术面试官格外重视。

README

查看 README 项目文档，可以初步了解 SPlayerX@2018 这个项目技术框架。根据我们的 README 文档，应该很快就可以编译通过，运行起一个开发中的版本。这个过程，对项目功能、代码和技术设计方向也能有一个初步的了解。

ISSUES

和所有开源项目一样，我们都有 Issues 区，也就是问题汇总。对项目有兴趣的爱好者，可以在 Issues/Bugs 中先找到一个自己感兴趣的小问题，作为第一个目标并尝试解决它。

不过 SPlayerX@2018 项目还是刚刚开始，所以目前的 issues 倒不是很多。而且我们的项目设计文档和任务管理主要还只是记录在我们团队的 Notion 中。所以，如果想参与项目，我更建议你直接Email给我 tomasen@gmail.com ，沟通我们的想法。

Git 版本管理工具

开源项目中使用的版本管理主要是 Git 工具。Git 确实有一定的学习成本。但只有掌握 Git，才有可能和其他项目开发者并行开发并进行友好的协作。如果之前对 Git 的使用不熟悉，那么在完成第一个 Todo/Issue 的阶段，也是摸熟 Git 的好时机。

Fork

Fork 是个很难准确翻译的词，原意是餐具中的叉子。在开发者的世界，或可引申为师出同源的几个叉子尖。当你对项目有一想法时，项目管理者可能并不愿意在项目中看到这样的实验性分支。这时就可以 fork 一个分支项目，来实现自己的想法。尤其是 github 大流行的背景下，fork 后再 merge back 变得很容易，所以 fork 对项目的维护负担也非常小，越来越可以忽略不计。

PR(Pull Request)

决定开发的目标之后就是 fork 和 PR 了。PR 就是 Pull Request，这是一个 Git 概念，相当于申请 Merge。换句话说，就是要求项目来 Pull 自己的Commit的代码。

在项目进入一个稳定阶段后，就不允许再直接修改主分支了，对于SPlayerX@2018 来说也就是 develop 分支。所以，包括我们团队自己的代码提交，也要先 fork，修改代码后，再通过网页提交 PR。

提交PR的好处是方便代码审核和CI工具对质量的判断。

代码规范

我们对代码规范的要求还是比较严格的。毕竟在几十人以上和近百万行代码的项目中，没有代码规范就很难保证代码的可读性。所以在撰写代码时，一定要注意是否符合该项目中对代码规范的要求，以免被退票。

遵守规则

SPlayerX@2018 项目中还有一些关于技术选择的约定。比如何时应该使用 vuex 的 data store，何时使用 Global Event Bus。这些都有在README中说明。

一些大型项目中，可能还有除了代码规范之外的项目规则。建议都要仔细阅读清楚主页或开发者社区的相关说明，以避免浪费时间。

联系项目管理者

当有一些可能带来重大改变的想法时，务必要先和项目管理者保持良好的沟通。通过 email 等方式将你的想法描述清楚。获得项目管理者和项目中其他开发者的认同和帮助是一个关键。附带提一句，初次联络时，务必不要忘记自我介绍，这并不仅仅是礼貌，更是建立信任的主要基础。

成为固定成员

通过积累PR和建立信任的阶段之后，通常管理者都会主动邀请你成为固定的开发成员。我们的项目当然很欢迎有同学愿意加入成为项目固定成员。而且暑假快到了，对项目有兴趣的实习申请都可以 Email: tomasen@gmail.com 投递简历。

SPlayerX@2018 的协作开发 was originally published in SPlayerX on Medium, where people are continuing the conversation by highlighting and responding to this story.

射手科技的第一款产品就是射手影音 SPlayerX，也俗称射手播放器，团队对 Mac 版本的产品标示设计还是比较满意，现在看也不能完全算过时。

而品志 PinIdea，也是团队转型手机游戏行业后新成立的公司和品牌，团队一直都对 Pin Idea 名字概念很喜爱，现在看也颇为亲切，时间让当时设计的 Logo 与朝夕工作的团队建立了感情。

设计师们绞尽脑汁，丢出了各种方案，但最终归于情感传承和精神延续的表达，在各类奇思妙想天马行空的尝试面前，激起了大家的共鸣。

新设计，是对历史的回顾与传承，也是对两者极简化处理的现代风格。

各类设计尝试，虽然最终没有被使用，但其中也不乏一些我们非常喜爱的元素。

全新形象 面对世界 was originally published in SPlayerX on Medium, where people are continuing the conversation by highlighting and responding to this story.

Shutting down my website(shooter.cn) on 2014, and lack of updates of SPlayer, make me feel guilty to users who supported SPlayer and shooter.cn in the past, and especially those users who paid for the Mac version.

I did have several attempts to resume development and try to update SPlayer in the last few years. But, as who I am now, the old project structures and lack of coding style make me feel sick. I can’t stand the outdated project source code anymore. I did try to move source code around to support new format such as h265, but I just psychologically break down every time that I opened the visual studio. So the project failed to continue.

Even though my mind can’t stand the outdated source code, but I always pay my debts. So my first decision in 2018, is to completely rewrite the project — a new SPlayer neXt.

In the Github Repo of our new project, I’m also making kind of an aggressive attempt, which is to struct the new project based on Electron + Vue.js.

The Electron framework is based on Chrome, which makes us able to use web technology to develop cross-platform desktop Apps. And Vue.js is another framework which can make the project source code clean, easy to read or maintain. These approaches can make the process of development feel like a breeze. The combination of these two frameworks, can have a very tempting ROI.

Our new SPlayerX 2018 project is using Webpack to manage packages, eslint and Airbnb’s JavaScript Style Guide to keep coding style standard. Travis-ci and appveyor are in place to automatically compile Mac, Win and Linux version of clients. Karma for unit test. vue-router and vuex to make data sharing between components. Vue.js Global Event Bus to pass events.

I believe coding should be an enlighten process. Creating a life-changing product with happiness is my belief. The future of SPlayerX development should also like that.

Farther more, SPlayerX, as always, is an open source project. We will always welcome developer and designer to join us or make suggestions or even guide us. We have many more plans and ideas which are waiting for your helps to make them real. Pull request are always welcomed. And of cause, you can follow our website sagittarius.ai and keep an eye on our jobs opening if you are interested.

SPlayerX 2018 = Electron + Vue.js was originally published in SPlayerX on Medium, where people are continuing the conversation by highlighting and responding to this story.

可是最近我们的XenServer上开始出现不稳定的状况。在灾难中，我们积累下一些经验，在此整理一下，以资借鉴：

× 文件系统的性能是最大的瓶颈。如果性能不佳很有可能成为故障的根源
我们的虚拟池(Pool)使用NFS文件系统，架设在一台基于SATA硬盘组装的RAID上。在为多台虚拟进程提供服务时，iops捉襟见肘。甚至逐渐发展到了一些虚拟机Guest误认为文件系统超时而导致了各种故障。而对于Host来说，我们遭遇到的最大灾难就是虚拟机Guest的硬盘掉落，如果没有之前的配置备份或“记忆”，几乎无法找回。

× 对硬盘池的剩余空间保持高度关注
当一个Storage Repository的没有剩余空间时，在其上的虚拟机并不会立刻停止工作或者即刻报警。这样表面上保证了高可用性，但是却会让人大意，进而造成数据大量丢失而导致不可逆的数据灾难。况且在规划虚拟机Guest时，我们通常会习惯性的超量划分硬盘分区，这种情况下，一旦一个虚拟机Guest突然产生大量数据写入时，很有可能导致硬盘池分区满溢的情况。因此对硬盘池保持高度警惕是非常重要的。

× snapshot的极限是30个
在使用XenServer虚拟池的过程中，我们曾对使用snapshot进行断点备份寄以希望。甚至撰写了一个每天自动对所有正在运行的虚拟机Guest制作Snapshot的脚本，停止了手动备份工作。完全没有注意到XenServer中，每个虚拟机Guest至多只能有不超过30个snapshot的限制。直到发生灾难那一天，我们才发现snapshot已经停止多日，回滚中便丢失了大量数据。

× 虚拟池中的Master的数据安全需要全力保证
在多台XenServer组建的虚拟池中，物理主机之间是有Master/Slave之分的。其中Master的数据安全和稳定性尤其重要，容灾能力也会比较差。当Master遭遇不可逆的故障和灾难时，尽管其他Slave上运行的虚拟机Guest进程仍然还能正常工作一段时间，但是此时重启就变成了危险行为。Master的硬件稳定性是如此重要，现在我甚至会推荐Master上不运行任何Guest虚拟进程。

× 留心网卡兼容性问题
我的虚拟池物理主机是使用家用主板自己组装。板载RealTek RTL81xx系列的千兆网卡。幸运的是，XenServer可以识别和使用该系列芯片的千兆网卡，初期大大降低了硬件成本。但是不幸的是，我们发现RealTek 系列网卡至少在最新的Xen 5.6+上无法保证无故障运行，严重是还会导致虚拟机Host主机死锁。最终我们又另外购买了一组TP-LINK TG-3269C 千兆网卡来保证稳定性。

× 升级XenServer版本要谨慎
不只限于前述网卡兼容问题，XenServer生产版本升级会带来诸多不稳定问题。在Citrix论坛上也有大量的抱怨，有人几乎为此丢了工作。而且对于一组虚拟池来说，必须整组升级到相同版本，所以回退的成本也很高。面对这些问题，升级XenServer前务必要谨慎的考察。

× Guest是有可能Crash宿主机的
通常我们认为虚拟机Guest是处于隔离状态的，因此认为Guest进程中无论发生什么不会影响物理主机Host的稳定的。但是实际运行中我们发现，运行的一些Guest操作系统是有可能导致宿主主机死锁或者崩溃的。我们是在安装运行一些FreeBSD的虚拟进程时发现这一现象的，其结果是最终会导致所有同一物理主机下的虚拟进程死锁。而这也是我们现在不再推荐在Master上运行Guest进程的一个原因。因为一旦Master锁死会导致更大的灾难。

× 忘记密码后跳过fsck的方法
在Linux Guest中发生严重的文件系统损坏时，会在启动时要求输入完整的root密码并进行全面的fsck。如果这时候忘记了root密码（特别是全面推进证书登录后）是很尴尬的。碰到这种处境时，可以通过XenCenter设置该虚拟机Guest的属性 — General — Boot Options — OS boot parameters ， 改为 fastboot（跳过fsck阶段）或 single （进入单用户模式）来进入系统并进一步修复文件系统。

× 切换Master的正确方法是在线状态中，登录Master并任命虚拟池中的另一台Slave担任新的Master
正因为Master在虚拟池中的主要性，当需要对Master进行软、硬件升级或调整时，必须要在Master上执行切换操作，将另一台物理主机制定为新的Master再进行维护。否则一旦Master在维护中出现故障，将会成为新的灾难。

from master:
xe pool-ha-disable
xe host-list
xe pool-designate-new-master host-uuid=

From XenCenter

1) Disable HA
2) Enter maintenance mode on Pool Master, will migrate all VMs to anohter host. During the Enter Maintenance mode dialog you will be asked to elect a new Pool Master.
3) Exit maintenance mode on old master
4) Enable HA

射手的 XenServer 虚拟化琐事 was originally published in SPlayerX on Medium, where people are continuing the conversation by highlighting and responding to this story.

今年上半年，在与多家硬件厂商的洽谈中，我们看到了忆捷。忆捷是国内少有的关注品质并精于设计的硬件厂商。旗下的硬件高清播放器系列从功能、质量到易用设计，均在市场上首屈一指。射手将优质中文字幕平台服务，与忆捷的生产工艺结合，推出首个搭载优质中文字幕匹配服务的硬件播放器──射手忆捷M60特别版，将是一个具有划时代意义的产品。

射手忆捷M60特别版不仅全面支持所有的高清、标清格式，不论是高清的mkv/ts或是rm/rmvb一概通吃。而且当遇到没有中文字幕的影片时，就会启动射手智能字幕匹配进程，在画面中显示字幕。再也不用到网上下载。且采用射手的SubRank算法，将尽可能显示出当前最新也是最高质量的字幕。

目前，这款预计在5月底进入市场的硬件播放器，已经在开始射手的官方淘宝店（shop.shooter.cn）中展开预售活动。而且参与就有机会成为射手影音2周年纪念幸运用户并获得1TB硬盘特别奖。（活动细则详见店铺公告）

影音生活，射手相伴

首个支持中文字幕匹配的硬件高清播放器 was originally published in SPlayerX on Medium, where people are continuing the conversation by highlighting and responding to this story.

一、了解影音皮肤设计框架

OK！同学们，现在开始给影音进行解剖，看看它的构造和我们人类有什么不同，解剖到任何区域我都由左往右一个个器官进行介绍，同学们要坚持住哦！

区域1：

影音的顶部，由顶部背景图片、LOGO文字图片、缩进系统按钮、缩小按钮、延展按钮（原始大小）、关闭按钮组成。

区域2：

影音的tips，先由tips背景图片，左边由放大1倍、放大2倍、标准画面（去上下黑边、去左右黑边）、音轨选择、画质增益，右边由正常播放（单曲循环、列表循环）、亮度对比度、截图、全屏切换（原始缩进）、窗口置前（窗口正常）、关闭按钮（全屏时才出现）组成。

区域3：

影音的控制栏，先是控制栏背景图片，剩下的先分为左、中、右三个部分来观察它吧

左边由LOGO、分享按钮、字幕左箭头、字幕按钮、字幕右箭头

中边由上一段、快退、停止、播放（暂停）、步进、快进、下一段

右边由打开文件、播放列表、设置面板、声音开启（静音）、声音大小调节按钮、声音调整背景图组成

区域4：

影音的边框由影音边框组成组成

区域5：

影音的打开文件部分，由影音打开文件按钮组成

这个打开文件与区域3右边的打开文件功能一样但视觉大小有区别

二、影音皮肤设计制作要点

上一节我们对影音进行了全面解剖，额~大家小心点不要踩到，不然影响后期拼装，配合一下，谢谢 ……

OK，知道了影音的组成元素，要记住他们哦，麻雀虽小，五脏还是要全的！

背景图片制作方法：
(在skins文件甲下创建一个FrameCfg.dat)

区域1：

顶部背景图片

分为ABC三个部分组成一张图，A与C同等宽度与高度，B则横向无限延展

编辑FrameCfg.dat

//标题栏

CAPTIONHEIGHT:31; //标题栏框横向延展图高度B区域

LCAPTIONTHICKWIDTH:3;//标题栏框左边图宽度A区域

RCAPTIONTHICKWIDTH:3;//标题栏框右边图宽度C区域

区域2：

tips背景图片

，为一个颜色块来做横向无限延展背景图

区域3：

控制栏背景图片

切掉两边取中间A部分1px图横向无限延展

声音调整背景图

作为贴图背景

区域4：

影音边框

取4个角，4个1px边做为无限延展

编辑FrameCfg.dat

//框架

FRAMECORNERWIDTH:3;//圆角的宽度

FRAMECORNERHEIGHT:3;//圆角的高度

LFRAMETHICKHEIGHT:1;//左边框纵向延展高度

TFRAMETHICKWIDTH:1;//顶部框横向延展宽度

RFRAMETHICKHEIGHT:1;//左边框纵向延展高度

BFRAMETHICKWIDTH:1;//底部框横向延展宽度

按钮图片制作方法：

所有的可操作按钮只需要做一张显示图即可，操作的状态效果系统会自动实现，减轻了很大的工作量，还不错吧

制作规范：

图片格式：bmp

图片尺寸：无

图片命名：需与原始文件名对应上，见影音元素命名表

图片元素命名表：

区域1：

顶部背景图片 CAPTION

LOGO文字图片 CAPTIONTEXT

缩进系统按钮 BTN_MINTOTRAY_SINGLE

缩小按钮 MINIMIZE_SINGLE

延展按钮 MAXIMIZE_SINGLE 原始大小 RESTORE_SINGLE

关闭按钮 CLOSE_SINGLE

区域2：

tips背景图片 TOPBACKGROUND

放大1倍 TOP_1X_SINGLE

放大2倍 TOP_2X_SINGLE

标准画面 TOP_NORMAL_WIDER_SINGLE

（去上下黑边TOP_NORMAL_SINGLE 、 去左右黑边TOP_LETTERBOX_WIDER_SINGLE）

音轨选择 TOP_AUDIO_SINGLE

画质增益 TOP_VIDEO_SINGLE

正常播放 TOP_NOCYCLE_SINGLE

（单曲循环TOP_SINGLECYCLE_SINGLE 、 列表循环TOP_ALLCYCLE_SINGLE）

亮度对比度 TOP_GAMMA_SINGLE

截图 TOP_CAPTURE_SINGLE

全屏切换 TOP_FULLSCREEN_SINGLE （原始缩进TOP_RESTORE_SINGLE）

窗口置前 pinail2_SINGLE （窗口正常pinail_SINGLE）

关闭按钮 TOP_CLOSE_SINGLE

区域3：

控制栏背景图片 BOTTOMBACKGROUND

左边由

LOGO SPLAYER

分享按钮 BTN_SHARE_SINGLE

字幕左箭头 BTN_SUB_DELAY_REDUCE_SINGLE

字幕按钮 BTN_SUB_SINGLE

字幕右箭头 BTN_SUB_DELAY_INCREASE_SINGLE

中边由

上一段 BTN_PREV_SINGLE

快退 FAST_BACKWORD_SINGLE

停止 BTN_STOP_SINGLE

播放 BTN_PLAY_SINGLE （暂停 BTN_PAUSE_SINGLE）

步进 BTN_STEP_SINGLE

快进 FAST_FORWORD_SINGLE

下一段 BTN_NEXT_SINGLE

右边由

打开文件 BTN_OPENFILE_SMALL_SINGLE

播放列表 BTN_PLAYLIST_SINGLE

设置面板 BTN_SETTING_SINGLE

声音开启 VOLUME_SINGLE （静音 MUTED_SINGLE）

声音大小调节按钮 VOLUME_TM_SINGLE

声音调整背景图 VOLUME_BG

区域4：

影音的边框由影音边框组成 FRAMECORNER

区域5：

影音打开文件按钮 BTN_BIGOPEN_SINGLE

其他元素：

预览图 皮肤名称 single

影音标示 watermark2

三、上传

步骤：

1：整理好图片元素，对应好图片名

2：在SPlayer\skins下自建文件夹命名为xxxx

3：再将整理好的图片元素放入xxxx中

4：打开射手影音播放器右键 界面==》选择xxxx皮肤

5：恭喜您已经成功的做了一套符合自己的皮肤了

射手影音皮肤设计制作说明 was originally published in SPlayerX on Medium, where people are continuing the conversation by highlighting and responding to this story.

与3.7版同时发布的，还有我们的设计者提供的3款基本皮肤包来抛砖引玉

只要在菜单-界面中关闭玻璃界面，即可看到皮肤选项。在后续版本中我们还会逐步加入更多绚丽的皮肤，娱乐之余可以让您有更加个性化的体验。

当然，我们也开放了皮肤的DIY功能，并提供了设计文档「射手影音皮肤制作方法」。只要按图索骥，你也可以打造属于自己的专属播放器。当然，你如果有好的皮肤设计方案，我们很欢迎你通过各种方式（skins@splayer.org）提交给我们，并发布到官方皮肤列表中，让你设计的皮肤可以与全世界用户分享。

注：因为Win7玻璃效果与传统界面设计上有巨大的不同，因此自定义皮肤功能初期仅在未开启玻璃效果时可见。

3.7版的更多更新内容还包括：
显著提高了打开文件的速度
大幅改善播放ts类文件的兼容性
更好的支持了蓝光高清等多种格式
支持显示蓝光原盘中的字幕
自动记忆蓝光的音轨和字幕使用习惯
改善播放网络文件的缓存机制和回放性能

用户界面：
播放时间和剩余时间显示在时间栏两侧
当播放器不处于播放状态时，不再保持前端显示的状态，不会在屏幕前打扰您
调整菜单布局，将“删除当前文件/文件夹”的功能移动至帮助菜单尾部
右上角增加控制循环/随机播放的按钮

视频兼容性：
解决安装QIYI影音后导致冲突不能正常播放文件的问题
支持 FRAPS 录制的MPEG编码的 avi 文件
支持多视频轨道的mkv著

字幕相关：
支持m4v（apple）文件中的字幕
增加更多字幕字体侯选项（楷体）

射手影音一直坚持用户体验至上的原则来改进我们的产品，我们希望新版本能让你更好的观看视频。我们也希望用户能多多给我们意见与建议到 http://feedback.splayer.org。你的支持是我们不断完善产品的原动力。

下载：最新标准版安装包 主页：http://splayer.org
微博：@沈晟 微群：@射手影音 Twitter：@ShooterPlayer

射手影音发布3.7 开始提供自定义皮肤 was originally published in SPlayerX on Medium, where people are continuing the conversation by highlighting and responding to this story.