oect群辉jellyfin10.10.7的docker版页面手势和硬件解码变绿修复

ColorStripes

OECT最近在折腾群辉的jellyfin 我发现手机APP和客户端的页面没有手势功能和硬件解码变绿的问题 操作非常不好用  自行编码jellyfin-web进行功能更新。


硬件解码变绿的问题
不知道什么原因 我试了很多版本 现在latest版本指向的10.11.X版本 这个版本对于RK3566芯片来说解码HDR都变绿  下载了一堆镜像只有10.10.7版本是不变绿的
从官方文件里jellyfin/jellyfin - Docker Image，找到10.10.7的版本，映射好自己的硬件解码目录就可以了。


客户端手势操作
下面以添加状态栏+0.25 x1 -0.25按键为例：

从 https://github.com/jellyfin/jellyfin-web  下载对应jellyfin版本的源代码，我的是10.10.7。

修改src\controllers\playback\video\index.html

1.                 <div class="osdTimeText">
   
2.                     <span class="endsAtText"></span>
   
3.                 </div>
   
4.                                 
   
5. <!-- 增加代码开始 -->
   
6.                 <button is="paper-icon-button-light" class="btnVideoSpeedDec paper-icon-button-light" title="降低 0.25倍速度播放">
   
7.                    -&nbsp;0.25&nbsp;X
   
8.                 </button>
   
9.                                 
   
10.                  <button is="paper-icon-button-light" class="btnVideoSpeedDefault paper-icon-button-light" title="正常速度播放">
    
11.                    1&nbsp;X
    
12.                 </button>
    
13.                 <button is="paper-icon-button-light" class="btnVideoSpeedInc paper-icon-button-light" title="增加 0.25倍速度播放">
    
14.                    +&nbsp;0.25&nbsp;X
    
15.                 </button>
    
16. 
    
17. <!-- 增加代码结束 -->
    
18.                 <button is="emby-ratingbutton" type="button" class="btnUserRating hide autoSize paper-icon-button-light" title="${Rate}">
    
19.                     <span class="xlargePaperIconButton material-icons favorite" aria-hidden="true"></span>
    
20.                 </button>

复制代码

绑定按钮事件： src\controllers\playback\video\index.js

1. 
   
2. // 顶部增加弹出提示的引用--------------------------
   
3. import toast from '../../../components/toast/toast';
   
4. 
   
5. 
   
6. 
   
7. 
   
8.     view.querySelector('.btnVideoOsdSettings').addEventListener('click', onSettingsButtonClick);
   
9. 
   
10. // 增加代码开始
    
11.     view.querySelector('.btnVideoSpeedDec').addEventListener('click', onVideoSpeedDec);
    
12.     view.querySelector('.btnVideoSpeedDefault').addEventListener('click', onVideoSpeedDefault);
    
13.     view.querySelector('.btnVideoSpeedInc').addEventListener('click', onVideoSpeedInc);
    
14.         
    
15.     const container = document.querySelector('#videoOsdPage');
    
16.     //增加触摸，鼠标按下+2倍数
    
17.     container.addEventListener('mousedown', onVideoSpeedDec2);   //鼠标按下
    
18.     container.addEventListener('touchstart', onVideoSpeedDec2);   //手指触摸屏幕
    
19.    
    
20.     //增加触摸，鼠标松开恢复
    
21.     container.addEventListener('mouseup', onVideoSpeedDec1Default);  //鼠标松开
    
22.     container.addEventListener('touchend', onVideoSpeedDec1Default);  //手指离开屏幕
    
23. 
    
24. 
    
25. // 增加代码结束
    
26.         
    
27.     view.addEventListener('viewhide', function () {
    
28.         headerElement.classList.remove('hide');
    
29.     });
    
30. 
    
31. 
    
32. 
    
33. // 增加事件函数--------------------------
    
34. 
    
35.     function nowPlayingDurationTextClick()
    
36.       ·············
    
37.     }
    
38. 
    
39. //增加代码开始
    
40. 
    
41.     // 播放速度降低 0.25
    
42.     function onVideoSpeedDec() {
    
43.         const video = document.querySelector('video');
    
44.         if (!video) return;
    
45.    
    
46.         let currentSpeed = video.playbackRate;  // 读取当前速度
    
47.         currentSpeed -= 0.25;
    
48.         currentSpeed = Math.max(0.25, currentSpeed);        // 限制最小速度，比如不低于 0.25
    
49.         video.playbackRate = currentSpeed;  // 应用新速度
    
50.         toast(`${globalize.translate('PlaybackRate')}: ${currentSpeed.toFixed(2)} 倍`);
    
51.     }
    
52.    
    
53.     // 恢复正常速度（1x）
    
54.     function onVideoSpeedDefault() {
    
55.         const video = document.querySelector('video');
    
56.         if (!video) return;
    
57.         video.playbackRate = 1.0;  
    
58.         toast(`${globalize.translate('PlaybackRate')}: 1 倍`);
    
59.     }
    
60.    
    
61.     // 播放速度增加 0.25
    
62.     function onVideoSpeedInc() {
    
63.         const video = document.querySelector('video');
    
64.         if (!video) return;
    
65.    
    
66.         let currentSpeed = video.playbackRate;
    
67.         currentSpeed += 0.25;
    
68. 
    
69.         currentSpeed = Math.min(10.0, currentSpeed);        // 限制最大速度
    
70.         video.playbackRate = currentSpeed;
    
71.                 toast(`${globalize.translate('PlaybackRate')}: ${currentSpeed.toFixed(2)} 倍`);
    
72.     }
    
73.         
    
74. 
    
75.         
    
76.     let bfSpeed=1;    //当前播放速度
    
77.     let speedHoldTimer = null; // 存储 setTimeout 的句柄
    
78.     let isSpeedApplied = false; // 标记是否已经应用了倍速
    
79.     // 播放速度+2倍速度
    
80.     function onVideoSpeedDec2(e) {
    
81.             const video = document.querySelector('video');
    
82.         if (!video) return;
    
83.                 if (video.paused) return; //暂停状态不触发
    
84.                 if (e.target.closest('.videoOsdBottom')) return;  // 点击底部状态栏的元素，不触发
    
85. 
    
86.                 // 清除之前的定时器
    
87.                 if (speedHoldTimer) {
    
88.                     clearTimeout(speedHoldTimer);
    
89.                     speedHoldTimer = null;
    
90.                 }
    
91.                 isSpeedApplied = false;
    
92.                 bfSpeed=video.playbackRate;  //记录一下之前的播放速度
    
93.                
    
94.                 // 设置 500ms 后触发倍速
    
95.                 speedHoldTimer = setTimeout(() => {
    
96.             const newSpeed = bfSpeed + 2;
    
97.             video.playbackRate = newSpeed;
    
98.             isSpeedApplied = true;
    
99.             toast(`${globalize.translate('PlaybackRate')}: ${newSpeed.toFixed(2)} 倍`);
    
100.                 }, 500);
     
101.                
     
102.     }
     
103.    
     
104.          // 播放速度+2倍速度 恢复之前的速度
     
105.     function onVideoSpeedDec2Default(e) {
     
106.             const video = document.querySelector('video');
     
107.         if (!video) return;
     
108.                 if (video.paused) return;
     
109.                 if (e.target.closest('.videoOsdBottom')) return;
     
110. 
     
111.                 // 清除定时器，防止松开后延迟触发
     
112.                 if (speedHoldTimer) {
     
113.                     clearTimeout(speedHoldTimer);
     
114.                     speedHoldTimer = null;
     
115.                 }
     
116. 
     
117.                 // 只有在已经应用了倍速的情况下才恢复
     
118.                 if (isSpeedApplied) {
     
119.                     video.playbackRate = bfSpeed;
     
120.                     toast(`${globalize.translate('PlaybackRate')}: ${bfSpeed.toFixed(2)} 倍`);
     
121.                 }
     
122.                
     
123.                 // 重置状态
     
124.                 isSpeedApplied = false;
     
125. 
     
126.     }
     
127. 
     
128. //增加代码结束
     
129.     function onSettingsButtonClick()

复制代码

手动编译源码
在jellyfin-web10.10.7/jellyfin10.10.7文件夹下面运行，我下载的时候是有魔法网络

1. export http_proxy=http://127.0.0.1:7890
   
2. export https_proxy=http://127.0.0.1:7890
   
3. npm install --registry=https://registry.npmmirror.com
   
4. npm run build:production

复制代码

docker设置：
修改自己的映射目录 - /volume1/docker/jellyfin/jellyfin-web:/jellyfin/jellyfin-web这个目录必须要有，然后将刚刚编译的文件放到你映射的目录里jellyfin-web里，启动docker就可以了

1. version: '3.5'
   
2. 
   
3. services:
   
4.   jellyfinny:
   
5.     image: jellyfin/jellyfin:10.10.7
   
6. 
   
7.     container_name: jellyfin
   
8.     privileged: true
   
9.     ports:
   
10.       - "8098:8096"
    
11.     volumes:
    
12.       - /volume1/docker/jellyfin/config:/config
    
13.       - /volume1/docker/jellyfin/cache:/cache
    
14.       - /volume1/docker/jellyfin/tmp:/tmp
    
15.       - /volume1/docker/jellyfin/jellyfin-web:/jellyfin/jellyfin-web
    
16.       - /volumeUSB2/usbshare:/usb2
    
17.       - /volumeUSB3/usbshare:/usb3
    
18.       - /volumeUSB4/usbshare:/usb4
    
19.       - /volumeUSB5/usbshare:/usb5
    
20.       - /volumeUSB6/usbshare:/usb6
    
21. 
    
22. 
    
23.     devices:
    
24.       - /dev/dri:/dev/dri
    
25.       - /dev/dma_heap:/dev/dma_heap
    
26.       - /dev/mali0:/dev/mali0
    
27.       - /dev/rga:/dev/rga
    
28.       - /dev/mpp_service:/dev/mpp_service
    
29.       - /dev/iep:/dev/iep
    
30.       - /dev/mpp-service:/dev/mpp-service
    
31.       - /dev/vpu_service:/dev/vpu_service
    
32.       - /dev/vpu-service:/dev/vpu-service
    
33.       - /dev/hevc_service:/dev/hevc_service
    
34.       - /dev/hevc-service:/dev/hevc-service
    
35.       - /dev/rkvdec:/dev/rkvdec
    
36.       - /dev/rkvenc:/dev/rkvenc
    
37.       - /dev/vepu:/dev/vepu
    
38.       - /dev/h265e:/dev/h265e
    
39. 
    
40. 
    
41.     restart: unless-stopped
    

复制代码

如果的源码不会修改：

可以用我修改好的附件，替换src\controllers\playback\video\index.html 和 src\controllers\playback\video\index.js ，然后编译

首先我的代码 功能：
1.左右滑动屏幕调整进度，只显示进度条（预览图不会消失，需要点两下屏幕收回状态栏就可以消失）
2.右边调整音量，但手机内核实际音量未变（可能是系统原因）
3.左边滑动调整亮度
4.长按屏幕四倍加速
5.双击暂停播放
6.进度图变成B站小电视，还有拖动进度条眼睛朝向拖动方向，点击眼睛变成竖线动画

运行效果图片可以看下面

本人非CSS专业方向，欢迎各位根据代码自行修改，也欢迎提出宝贵的意见修复1和2里的bug问题或提供文件。
感谢Gemini pro大学生特供版提供的代码帮助

xcgf

今天为什么没有更新包

bird202301

非docker版jellyfin基本上转码是废的，还找不到不解码的选项，有知道的请告知，经常卡死，弄起来很恼火
只有映射网络硬盘直接播放，不卡

supergubc

谢谢分享技术贴，原来解码变绿是jellyfin版本的问题

ColorStripes

xcgf 发表于 2026-1-21 21:06
今天为什么没有更新包

需要什么更新包呢 我的更新就结束了

ColorStripes

bird202301 发表于 2026-1-22 15:15
非docker版jellyfin基本上转码是废的，还找不到不解码的选项，有知道的请告知，经常卡死，弄起来很恼火
只 ...

启动管理员权限 并且在套件映射目录里面添加 环境变量目录
devices:
      - /dev/dri:/dev/dri
      - /dev/dma_heap:/dev/dma_heap
      - /dev/mali0:/dev/mali0
      - /dev/rga:/dev/rga
      - /dev/mpp_service:/dev/mpp_service
      - /dev/iep:/dev/iep
      - /dev/mpp-service:/dev/mpp-service
      - /dev/vpu_service:/dev/vpu_service
      - /dev/vpu-service:/dev/vpu-service
      - /dev/hevc_service:/dev/hevc_service
      - /dev/hevc-service:/dev/hevc-service
      - /dev/rkvdec:/dev/rkvdec
      - /dev/rkvenc:/dev/rkvenc
      - /dev/vepu:/dev/vepu
      - /dev/h265e:/dev/h265e

bird202301

ColorStripes 发表于 2026-1-22 16:22
启动管理员权限 并且在套件映射目录里面添加 环境变量目录
devices:
      - /dev/dri:/dev/dri

谢谢您，我试试

xcgf

这内容什么意思 看不明白

sichaozhi

用nyanmisaka/jellyfin这个好像可以直接转码，我用的就是这个

ColorStripes

sichaozhi 发表于 2026-1-26 14:18
用nyanmisaka/jellyfin这个好像可以直接转码，我用的就是这个

HDR变绿那个解决不了