商务合作联系微信：telegram: @tianmeiapp
站长邮箱：[email protected]
2020 年 9 月；字数 2500；阅读 5 分钟
最近去 学习 KM 和。为了解决语言问题，笔者在浏览器上尝试了很多字幕翻译插件后，决定用它来管理字幕辅助学习。虽然这个插件是中国人开发的，但是如果你不去国外网站刷视频，就不会有这种特殊需求；其次，国内各种字幕组和本地播放器可以帮助完美加载双语字幕；而且，这个插件是基于CC字幕文件的，国内支持CC字幕的视频资源并不充足。所以国内的在线视频刷机一般不用，自然也没有相应的教程。
图片 1. 在 插件商店中的受欢迎程度
图2.左栏为插件支持网站；右栏是作者提供的一些脚本（类似于app中的实验室功能）
""，Dual表示（双摄），Sub取自。但由于字幕和CC字幕有一些区别（详见CC： - You Don't Know），所以应该叫它更合适。之前的版本非常好用，但是从评论中可以看出，经过不断的迭代和改进，用户界面也更加复杂，功能也进一步完善，设置无法与谷歌账号同步，导致容易丢，而且开发者在官网上写的教程太专业了，比较适合程序员学习。我花了很长时间才理解主要内容。所以，今天在这里写个入门教程，一是送给有缘人，二是方便日后重新安装。
最终效果图如下，接下来就是教学内容了。
图3.最终调试效果（以下两行为原生字幕）
图28.黄心黑边框
图29.黄底黑字
首先进入插件商店，搜索下载安装。如果插件安装失败，可以开启开发者模式。安装完成后，记得固定浏览器面板上的图标，在视频播放页面上左键右击。您将看到两个有用的屏幕。
图4.左键弹出控制面板（类似网站前端）
图片5.右键点击“选项”进入设置页面（类似网站背景）
先看前端，前端默认为两行（字幕行数可在后台修改），对应上下字幕
图 6
“字幕语言”
字幕语言显示从网页获取的原始字幕文件。如果此列中没有选项，则该插件将不起作用。第四个图标）。视频不提供CC字幕，但是 up开放了语音自动生成字幕的权限（自带功能，目前只支持英文和日文），所以我们这里选择“英文（自动生成）”。
“机器翻译”
顾名思义，如果您想看到翻译成其他语言的字幕，请选择相应的语言选项。第一行的(109）表示有109个选项。
“语言工具”
如果你想看中文的拼音（可以选择普通话、粤语、粤语），或者看日文片假名的平假名拼写（可以选择日文解析），可以选择对应的选项，但不一定如果您选择它，就可以看到它。要达到效果，需要进行背景设置，在第四项“主题风格”中选择对应的风格，即可达到目的。
“主题风格”
这里可以选择我们在后台设置和组装的样式，接下来我们开始讲解如何在后台设置和组装所需的样式
在后台一共8个标签，接下来我会一一讲解
“一般”
顾名思义，就是最基本的“”。如果你觉得麻烦，不想做任何高级设置，那么建议点击直到看到，不需要进行任何点击操作。默认字幕显示效果就是这样（如果你觉得控制面板太长，删除“字幕菜单”中不相关的选项）。如果要设置后者，建议这里将“字幕渲染”-“基本样式”-“描边”改为“无”。这样我们可以更直观的看到我们设置的效果。 “字幕数”中的2对应前端的两行设置。
因为CC字幕会有一些暗示性的字幕，比如“一段音乐~，一个奔跑......”，所以它的初衷是为了方便残疾人使用语内字幕翻译，这里直接转为民用（就像ios辅助功能一样），如果你只是想安静地看字幕，不想接受这些提示，选择“删除评论”。
图片7.背景1
图8.默认字幕效果
图9.默认字幕效果2
图10.默认字幕效果3
“网站”
如果你喜欢看 剧集，可以学习一下。官网手册在这（ps： Bad好美~）
图一1.背景二
“快捷键”
这里可以看到，鼠标可以拖动字幕上下移动，修饰键不懂，一般调整后字幕不会移动，MacOS快捷键太多，所以我简单放在这里。快捷方式已被删除。
更新和补充：建议将修改键默认设置为Alt，将鼠标动作改为选择文字，这样鼠标在字幕上的时候就可以直接绘制平移，鼠标在可用于通过按住 Alt 来移动位置。 （注：可能是插件bug的原因，如果鼠标动作设置为“移动位置”，按住Alt不能画字幕）
图12.背景3
“语言工具”
学习日语的学生可以选择只使用拼音“汉字”或拼音“汉字和假名”。
图13.背景4
图14.逻辑关系
图一5.
图一6.
“主题风格”
接下来是重头戏。 在“主题样式”选项下，可以看到三个小标签（主题样式、组件样式、条件样式）
图17.后台5
它们之间的逻辑关系如下图所示
图18.使用逻辑（1)--主题风格
图19.使用逻辑（2)--语言工具
“我们先在组件样式中设置组件，然后在主题样式中组装，最后在前端勾选”，这样自定义字幕就设置好了。点击加号表示开启此项，以下是作者自定义设置（不同尺寸的显示器和不同的窗口大小会影响参数）。
图20.黑色描边
图21.灰色背景常规
注意“内间距”四个选项对应字幕块的四个边（左上右下）。个人感觉这个设置最接近英文母语字幕，但是汉字太细不醒目，所以加粗了
图 22. 灰色背景加粗
这将设置像封面一样的字幕。
图23.仿字幕效果
当然这里也用到了开发者提供的缩放脚本，让字幕可以适应小屏、全屏和宽屏，后面会讲到。
“插件”
通过插件内容编写，然后以插件状态将其应用到视频网站。
图24.后台6
这些插件均取自官网插件系统。由于作者不是程序员，我直接“用”了。安装非常简单语内字幕翻译，只需粘贴代码并选择类型即可。开发者将插件分为三种类型：样式、插件和字幕。样式对应CSS，可以修改网页的布局；插件对应，可以赋予网页新的功能；字幕对应字幕插件，注意在“类型”中选择字幕文件对应的格式，插件会自动转换粘贴的字幕文件。对于代码，也可以机器翻译（语言需要在参数中注明，详见上面的链接）。在上面的语言编程中，可以使用“/*加注释*/”的方式对代码进行注释，比较容易理解。
这些插件的功能说明，可以参考这里再决定是否安装：
“暂停并上移”：视频暂停后，字幕上移，防止被进度条挡住，原生字幕也有此功能；
第二项是加载本地字幕文件；
“字幕块整体透明度为20%”：字符不再是纯白色，整个字幕块的透明度保持不变，代码中的变量是，注意反转；
“第二行模糊悬停清晰”：此功能适合听力练习，只有鼠标放在第二行字幕上才会出现字幕；
“智能缩放”：这个功能很好用，推荐安装；
“悬停暂停”：鼠标放在字幕上时视频自动暂停，用处不大。如果是做绘图翻译，鼠标跑出网页时暂停无效，空格键依旧香。
更新补充：我已经要求开发者使用样式插件修改字幕字体，如下图
先放代码（“,sans-serif”表示如果系统不能调用设置的字体，可以调用sans-serif字体家族的字体替换，只是为了保证这里的代码质量，当然也可以删除；最后一行评论也可以删除）
.dualsub-renderer {
font-family: "方正俊黑简体_细",sans-serif;
}
/* FZJunHJW_Xi */
图25.写代码
图26.字体名称选择
图27.记得刷新
分别设置第一行和第二行的字幕
.dualsub-renderer .subtitle-1 {
font-family: "字体1";
}
.dualsub-renderer .subtitle-2 {
font-family: "字体2";
}但是如果一个字体中有很多子类型，比如“light”、“bold”、“”，可以直接在字体名称后面加上，比如“Neue”
图27.各种常见的翻译类型
以上学习熟练后，可以得到如下效果
图28.黄心黑边框
图29.黄底黑字
“高级”
顾名思义，全部重置
图30.
“关于”
商务合作联系微信：telegram: @tianmeiapp
站长邮箱：[email protected]
原文链接：图1.在谷歌插件商店中的欢迎程度(组图)，转载请注明来源！