Emby 终极美化 + 优化, 让你的自建媒体库与众不同
前言
在搭建完 Emby 媒体库之后, 使用默认的 Web UI 似乎是有点过于单调了. 而且有个很大的缺点就是: 不能使用外部播放器打开媒体资源. 除此之外, 在界面的美化方面也是需要额外工作, 当然我们也可以为 Emby 的 Web UI 增加一些额外的功能, 比如弹幕之类的. 这篇文章将一一教你如何实现上述功能.
教程目的
- 实现 Emby Web 主页美化
- 为 Emby Web UI 添加额外的播放器跳转控件
- 在 Emby Web UI 的播放器页面添加弹幕功能
用到的开源项目
- 本篇教程可能需要科学上网
- 本篇教程基于
Windows环境编写, 但同时适用于Windows和Linux
1. 定位 dashboard-ui
- 在网页浏览器中打开你的 Emby 前端, 找到右上角的设置图标, 进入系统设置.
- 在
Dashboard栏目中找到···图标, 展开并点击View Server Info (查看服务器信息), 如 图 1-1
- 这里会展示 Emby 不同数据目录在您的服务器上存储的位置, 我们需要定位到 Emby Server 的根目录并在服务器上打开它. 如 图 1-2
- 打开文件夹后, 定位到
system/dashboard-ui
注: Linux 非 Docker 用户的 Emby 目录在 /opt/emby-server/system/dashboard-ui2. 安装插件
分别从上文提到的开源项目中下载这三个项目的源码
2.1 安装 embyExternalUrl
- 将源码中的
embyWebAddExternalUrl文件夹解压至dashboard-ui的根目录, 重命名为embyExternalUrl - 打开
dashboard-ui目录中的index.html, 并在<head>前添加如下代码, 最终结果如 图 2-1-1 所示
<link rel="stylesheet" id="theme-css" href="embyExternalUrl/icons/ExternalPlayer.css" type="text/css" media="all" />
<script src="embyExternalUrl/embyLaunchPotplayer.js"></script>
- 保存后启动 Emby Web UI, 随便打开一个媒体页面, 应该能看到如 图 2-1-2 中的按钮.
2.2 安装 Emby Crx
- 打开源码文件夹, 在源码子目录中分别找到如下文件
common-utils.js
jquery-3.6.0.min.js
md5.min.js
style.css
main.js- 在
dashboard-ui中创建emby-crx目录并将这些文件解压至该目录中 - 打开
dashboard-ui目录中的index.html, 并在</head>前添加如下代码, 最终结果如 图 2-2-1 所示
<link rel='stylesheet' id='theme-css' href='emby-crx/style.css' type='text/css' media='all' />
<script src="emby-crx/common-utils.js"></script>
<script src="emby-crx/jquery-3.6.0.min.js"></script>
<script src="emby-crx/md5.min.js"></script>
<script src="emby-crx/main.js"></script>
- 保存后启动 Emby Web UI, 您应该能看到主页有全屏海报出现.
注: 如您在添加后遇到了无限转圈进不去主页的情况, 这不是您的问题, 插件本身就有一些问题. 您可以卸载此插件.
2.3 安装 emby-danmaku
- 在
dashboard-ui中创建emby-danmaku目录并将这插件目录中的ede.js与cf_worker.js文件解压至该目录中 - 打开
dashboard-ui目录中的index.html, 并在</body>前添加如下代码, 最终结果如 图 2-3-1 所示
<script src="emby-danmaku/ede.js" defer></script>
- 打开 Emby 后, 随便打开一个媒体文件, 即可看到弹幕. 如 图 2-3-2 所示
点击左下角设置选项, 即可设置弹幕规格, 平台, API Key 等等
结语
感谢观看, 如果觉得有帮助的话, 请留下你的评论, 并将文章分享给有需要的人, 感谢!
Emby 终极美化 + 优化, 让你的自建媒体库与众不同
https://blog.nanami.tech/archives/184/