首页 > 其他分享 >emby美化后续折腾

emby美化后续折腾

时间：2025-01-04 15:25:29浏览次数：5  
标签：style 100% emby 折腾 background icon 美化 size

GitHub - Nolovenodie/emby-crx: Emby 增强/美化 插件 (适用于 Chrome 内核浏览器 / EmbyServer)

 

 

emby美化尝试

皮蛋熊 皮蛋熊 2023-10-18/1 评论/2 点赞/6151 阅读/8117 字 温馨提示： 本文最后更新于 2023-10-18，若内容或图片失效，请留言反馈。部分素材来自网络，若不小心影响到您的利益，请联系我们删除。

简介

通过本文，可以美化emby和添加功能，使其看起来赏心悦目。教程同时适用于docker，pc，linux直装等emby场景，请找到对应的文件夹修改即可。

添加多种播放按钮

项目是这个 https://github.com/bpking1/embyExternalUrl，感谢bpking1大佬的付出。 成功后将有如下的排版显示：image.png

先下载上面项目，解压后将其中embyWebAddExternalUrl目录复制到emby安装目录的dashboard-ui中。 再修改dashboard-ui/index.html文件，在</head>前添加：

<link rel="stylesheet" id="theme-css" href="embyWebAddExternalUrl/icons/ExternalPlayer.css" type="text/css" media="all" />
<script src="embyWebAddExternalUrl/embyLaunchPotplayer.js"></script>
 

如下：

image.png

此时保存后刷新页面就可以看到相关的图标了。

进阶

原作者的embyLaunchPotplayer.js 中引用了js cdn的地址，有时候在某些环境下刷不出来，这里可以将其改为本地地址，具体来说就是编辑embyLaunchPotplayer.js文件将

https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/
 

去掉即可。也即是这部分:

document.querySelector("div[is='emby-scroller']:not(.hide) .icon-PotPlayer").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-PotPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-IINA").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-IINA.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-MXPlayer").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-MXPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-infuse").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-infuse.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-VLC").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-VLC.webp)no-repeat;background-size: 100% 100%;font-size: 1.3em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-NPlayer").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-NPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.3em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-StellarPlayer").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-StellarPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-MPV").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-MPV.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-Copy").style.cssText += 'background: url(https://fastly.jsdelivr.net/gh/bpking1/embyExternalUrl@0.0.5/embyWebAddExternalUrl/icons/icon-Copy.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
 

改为：

document.querySelector("div[is='emby-scroller']:not(.hide) .icon-PotPlayer").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-PotPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-IINA").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-IINA.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-MXPlayer").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-MXPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-infuse").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-infuse.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-VLC").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-VLC.webp)no-repeat;background-size: 100% 100%;font-size: 1.3em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-NPlayer").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-NPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.3em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-StellarPlayer").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-StellarPlayer.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-MPV").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-MPV.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
document.querySelector("div[is='emby-scroller']:not(.hide) .icon-Copy").style.cssText += 'background: url(embyWebAddExternalUrl/icons/icon-Copy.webp)no-repeat;background-size: 100% 100%;font-size: 1.4em';
 

再次刷新后就用的本地地址了，在所有的环境都可以把图标刷出来。

添加首页大屏

项目是这个： https://github.com/Nolovenodie/emby-crx 感谢 Nolovenodie 大佬的付出。 成功后显示如下：image.png

先下载上面项目，在每个文件夹中都找一遍，我们总共需要如下几个文件：

common-utils.js
jquery-3.6.0.min.js
main.js
md5.min.js
style.css
 

去emby的安装目录中找到dashboard-ui文件夹，在其中创建一个emby-crx文件夹： 把上面的文件全部复制进去image.png

然后修改dashboard-ui/index.html文件，在</head>前添加下面的代码：

<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>
 

下面这个样子就是正确的。

image.png

保存后刷新网页即可。

添加弹幕

项目是这个：https://github.com/RyoLee/dd-danmaku 感谢 RyoLee 大佬的付出。

我这里测试没有成功，等待尝试再补充上去。

最后

我更推荐直接用docker版本的，特别是这个大佬的把这些都集成了：https://hub.docker.com/r/amilys/embyserver

上面教程提供给其他平台使用的用户修改思路。

参考

  1. https://hub.docker.com/r/amilys/embyserver
  2. https://github.com/bpking1/embyExternalUrl
  3. https://github.com/Nolovenodie/emby-crx
  4. https://github.com/RyoLee/dd-danmaku
    -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

项目主页：

https://github.com/Nolovenodie/emby-crx

该主题是通过chrome插件来调用的，但是本文介绍的是如何直接安装到emby server中

以群晖emby 4.7.11举例

web ui目录为：

/volume1/@appstore/EmbyServer/system/dashboard-ui/

如果是Docker安装的，比如lovechen/embyserver

位置在:

/system/dashboard-ui/

无论你什么安装方式，你只需要找到安装目录下的index.html就找对了！比如容器就是

docker exec -it  容器ID find -name "index.html"

从作者的github库中下载源码压缩包：emby-crx-master.zip

从压缩包中提取如下文件：

common-utils.js
jquery-3.6.0.min.js
md5.min.js
style.css
main.js

把他们上传到 web ui目录 中去

然后编辑 web ui目录 中的index.html文件

在</head>前插入

    <link rel='stylesheet' id='theme-css'  href='style.css' type='text/css' media='all' />
    <script src="common-utils.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="md5.min.js"></script>
    <script src="main.js"></script>

刷新Emby网页即可生效

------------------------------------------------------------------------------------------------------------------------------

项目地址： https://github.com/Nolovenodie/emby-crx

 

 

 

该主题是通过chrome插件来调用的，但是本文介绍的是如何直接安装到emby server中

我这里以群晖emby 4.8.0.67举例

web ui目录为：

 

/volume1/@appstore/EmbyServer/system/dashboard-ui/


如果是Docker安装的，比如lovechen/embyserver

位置在:

 

/system/dashboard-ui/


无论你什么安装方式，你只需要找到安装目录下的index.html就找对了！比如容器就是

docker exec -it  容器ID find -name "index.html"


从作者的github库中下载源码压缩包：emby-crx-master.zip

从压缩包中提取如下文件：

 

common-utils.js
jquery-3.6.0.min.js
md5.min.js
style.css
main.js


把他们上传到 web ui目录 中去

然后编辑 web ui目录 中的index.html文件

在</head>前插入

 

    <link rel='stylesheet' id='theme-css'  href='style.css' type='text/css' media='all' />
    <script src="common-utils.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
    <script src="md5.min.js"></script>
    <script src="main.js"></script>


 

 

 

这里会有2个坑，

第一个，上述压缩包内的5个文件可能读取权限不够就会出现500报错，web并没有变化，不能加载美化。

这里我们需要给这5个文件所有权限，我这里用的是MobaXterm直接读取文件 ，右键选择权限，并勾选全部权限，保存。（前提是登录SSH，需要root账户）

 

应用完成后刷新web网页，就成功了。

 

第二个，就是style.css需要修改

这里需要把flex修改成为none，不然在媒体库标题上会显示标题文字，从而导致只能点击标题文字才能进入标题媒体库。

 

最后展示一下emby主页美化轮播：

 

 

标签：style,100%,emby,折腾,background,icon,美化,size
From： https://www.cnblogs.com/gnz48/p/18651908

相关文章

  • embyserver
    amilys/embyserver毫秒镜像 自供更新时间2024/11/09betav4.9.0.32latestv4.8.10.0开启请在/config/config/ext.sh添加媒体库ID再重启容器和Ctrl+F5刷新网页亲测beta版本才会自动生成ext.sh文件 文件内容如下#!/bin/sh########说明2023-07-30#......
  • 当你反复折腾下载了unity之后从0开始了解制作游戏4
    第四章学习游戏制作教程上回说到，你更换了unity编辑器的语言。看到并不是全汉化的编辑器变成悲伤蛙的你，决定努力奋进，和手机翻译软件携手同行，共同学习（bushi）制作教程。你点开了unity2021，在项目栏双击了之前你建立的项目Myproject。稍作等待后，你看到了你的项目，一个腾空小人......
  • 折腾笔记[4]-cuda的hello-world
    摘要在window11上搭建cuda开发环境并编译helloworld程序;关键信息编译器:cudanvcc12.4.131平台:windows11原理简介cuda简介CUDA(ComputeUnifiedDeviceArchitecture，统一计算架构)是由英伟达所推出的一种集成技术，向用户提供了可以很优雅地调用GPU进行并行计算的编程......
  • Emacs折腾日记(七)——布尔变量、逻辑运算符与位运算
    通过前面的几节内容我们已经对elisp中基本类型有所了解了。emacslisp简明教程中下一节开始就是讲相关容器。所以这一篇我将它作为基础类型的一个结尾，将平时会用到，但是之前没有涉及到的内容都包含进来。bool类型本篇首先要提到的就是bool类型，我们已经在前面几章中用到过它，但是......
  • 再战博客园美化（九）
    被拉回来赶工了我圆角没了，不过更烦的是里面的forFlow没有背景难受。圆角改下顺序就好了。好吧不行，用了第一个!importantforFlow背景待我去小窝吸一下配色。我测，最丑的一集。但是里面不错。再去看看两位佬怎么做的emm，看懂了，有卡片不弄forFlow，里面才弄forFlow。......
  • 再战博客园美化（八）
    今天玩翻页功能debug还是得人来啊，这gpt也不管用。但是有些我不会的玩意找一下还不错。同步一下进度。想不明白为什么这个不生效，先无视了，先弄页面功能。完事不错，有模有样。白天丑死了，急需白天壁纸。不对啊我传完了才想起来我干嘛不用博客园的图床，傻了说是......
  • 折腾笔记[3]-迁移U盘的ubuntu到虚拟机
    摘要使用clonezilla工具迁移安装到U盘中的ubuntu18.04系统到vmware虚拟机.关键信息clonezillaubuntu18.04cpu:x86_64vmware:17.6.0ubuntu引导方式:UEFI+GRUB2windows11原理简介clonezilla简介[https://clonezilla.org/][https://linux.cn/article-3888-1.html]再......
  • Emacs折腾日记(六)——elisp字符与字符串类型
    本文相关的知识点主要来自elisp简明教程后续内容可以直接查看这个教程上一节我们了解了elisp中基础数据类型之一的数字类型，相比于C/C++来说elisp的数字类型更少，学习起来可能也更加简单。那么这篇我们来学习另一个数据类型——字符串字符串的基本介绍回忆以下在C/C++中学......
  • 再战博客园美化（七）
    上回说到。。。我的博客总算有了一个亮色一个暗色主题可以切换了里面也有一个forFlow？找不到文章列表，没有进行替换。也行吧，以后再修，先埋雷先，反正我不是专业前端。（能跑不动原则）今天玩——背景图！欧，不，丑死了。白天黑夜的图片需要不同卡片半透明磨砂标头、页码按钮问......
  • 再战博客园美化（六）
    连续剧更新了佬提了一嘴，于是我发现我替换没替换完，现在好了。这是什么bug明明存在forFlow，但是不让我查询？弄错了，用.就好lightdark回来了，vue没有检查我默认有没有赋值，他只会自己贴一个上去。算了，那就用vue的切换！不会吧。在call后出现已被定义，有问题。被重复引入了，但......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99