AutoBangumi 播放器设置（Player Settings）完全指南：jump 跳转与 iframe 嵌入模式详解

后端前端音视频【免费下载链接】Auto_BangumiAutoBangumi - 全自动追番工具项目地址https://gitcode.com/gh_mirrors/au/Auto_Bangumi点击查看免费下载本文是 AutoBangumi WebUI 中播放器Player功能的配置指南聚焦于如何将 Jellyfin、Emby、Plex 等媒体服务器接入 AutoBangumi 的 Web 界面实现「在侧边栏一键跳转」或「在页面内直接内嵌播放」两种观看体验。读完本文你将掌握两个关键配置项Type 与 Player URL的完整含义、底层实现机制、localStorage 存储细节以及从零配置到实际播放的完整操作路径。播放器设置是什么AutoBangumi 的核心能力是自动追番、下载并重命名媒体文件而「播放」是这条自动化流水线的最后一环。播放器设置Player Settings用于控制 WebUI 侧边栏中的播放器Player页面它本身并不负责转码或流媒体分发而是作为一个「入口」把已经就绪的媒体内容通过你的媒体服务器Jellyfin、Emby、Plex 等呈现出来。该设置的官方说明位于 docs/en/config/player.md中文版见 docs/config/player.md全部配置只包含两个核心字段Type类型与Player URL播放器地址。它们共同决定了播放器页面被打开时呈现什么内容。两个核心配置项Type类型jump 与 iframe播放器类型决定打开播放器页面时的行为方式可选值仅有两种值行为适用场景jump打开播放器页面时直接跳转到外部媒体服务器希望在媒体服务器自己的完整界面中浏览、管理、播放iframe在 AutoBangumi 页面内嵌媒体服务器希望在不离开 AutoBangumi WebUI 的前提下直接观看从源码实现看这两个值被定义为联合类型MediaPlayerType见 webui/src/store/player.tstype MediaPlayerType jump | iframe;默认值为jump即默认打开播放器页面时会跳转到外部媒体服务器而不是内嵌播放。Player URL播放器地址播放器地址即 Jellyfin、Emby、Plex 或其他媒体服务器的访问地址。这里有一个非常实用的细节未填写协议http://或https://时前端会自动补全http://所以直接填写192.168.1.100:8096这样的主机名与端口也是可以的。这一自动补全逻辑在 webui/src/store/player.ts 中通过normalizeUrl函数实现function normalizeUrl(url: string): string { if (!url) return ; const trimmed url.trim(); if (!trimmed) return ; // If URL already has a protocol, return as-is if (/^https?:\/\//i.test(trimmed)) { return trimmed; } // Otherwise, prepend http:// return http://${trimmed}; }要点归纳空字符串或全空白输入会被归一化为空串此时播放器页面会显示引导提示而非播放器已带http://或https://前缀的地址保持原样不会被二次修改其余情况一律在最前面补上http://。注意自动补全只针对http(s)协议不支持例如rtmp://、plex://之类的其他协议前缀。在配置界面webui/src/components/setting/config-player.vue中播放器地址输入框的占位提示正是http://192.168.1.100:8096这也是 Jellyfin 最常见的局域网访问形态可直接参考。存储位置浏览器本地存储而非 config.json播放器设置的一个关键特性是它保存在浏览器的本地存储localStorage中不属于config.json因此修改后不需要点击「保存并重启」。对应实现同样位于 webui/src/store/player.ts使用了 VueUse 的useLocalStorage组合式 APIexport const usePlayerStore defineStore(player, () { const types refMediaPlayerType[]([jump, iframe]); const type useLocalStorageMediaPlayerType(media-player-type, jump); const rawUrl useLocalStorage(media-player-url, ); const url computed(() normalizeUrl(rawUrl.value)); function setUrl(value: string) { rawUrl.value value; } return { types, type, url, rawUrl, setUrl, }; });这里两个 localStorage 键值分别是media-player-type记录播放器类型默认jumpmedia-player-url记录用户输入的原始地址未归一化默认空字符串。由于存储位于浏览器本地会有两点直接影响无需重启后端服务设置是纯前端行为改完即生效不需要等待后端重载配置按浏览器/设备隔离换一台设备或浏览器打开 AutoBangumi播放器设置不会自动同步过去需要在新的浏览器里重新配置一次。两种模式的底层行为jump 模式跳转到外部媒体服务器当type为jump且url非空时打开播放器页面的瞬间会触发跳转。该逻辑位于路由守卫 webui/src/router/index.tsif (type.value jump url.value ! to.path /player) { open(url.value); return false; }这里的open(url.value)调用浏览器原生window.open在新标签页打开媒体服务器地址return false表示取消原本的播放器页面导航所以你会看到播放器页面「一闪而过」然后直接进入媒体服务器的新标签页。iframe 模式页面内嵌播放当type为iframe时播放器页面会渲染一个占满页面的iframe把媒体服务器直接嵌入 AutoBangumi WebUI 中。对应实现位于 webui/src/pages/index/player.vueiframe :srcurl :title$t(sidebar.player) frameborder0 allowfullscreentrue classembed-frame /iframeiframe 的src直接绑定归一化后的url来自 store 的computed值。需要注意的是X-Frame-Options 限制能否成功内嵌取决于目标媒体服务器是否允许被 iframe 引用。部分服务会通过X-Frame-Options或Content-Security-Policyframe-ancestors禁止被嵌入此时 iframe 区域会显示空白或被浏览器拦截需要改用jump模式地址可达性内嵌页面由浏览器直接加载因此地址必须从访问 WebUI 的这台设备/浏览器可达而非仅从 AutoBangumi 后端可达全屏支持iframe 已开启allowfullscreentrue媒体服务器自带的播放器全屏按钮可以正常工作。未配置时的引导界面如果url为空未配置或配置被清空播放器页面不会渲染 iframe而是显示一个引导空状态见 webui/src/pages/index/player.vue指引用户三步完成配置打开Config配置页面找到Media Player分区填写媒体服务器地址Jellyfin、Emby、Plex 等回到播放器页面开始观看。该界面文案定义在 webui/src/i18n/en.json中文对应 webui/src/i18n/zh-CN.json引导按钮直接链接到/config路由。若你看到「Media player not configured」提示说明只需完成上述两步即可。完整配置步骤启动 AutoBangumi浏览器登录 WebUI在侧边栏点击Config配置找到Media Player Setting媒体播放器设置折叠面板在Type类型下拉框中选择jump跳转或iframe内嵌在Player URL播放器地址输入框中填写媒体服务器地址例如http://192.168.1.100:8096Jellyfin 典型局域网地址也可以省略协议直接写192.168.1.100:8096前端会自动补全http://无需点击「保存并重启」配置即时生效于当前浏览器点击侧边栏Player播放器进入jump模式下会直接在新标签页打开媒体服务器iframe模式下会在 AutoBangumi 页面内嵌显示媒体服务器。常见问题与排查思路现象可能原因处理方式播放器页面显示「Media player not configured」media-player-url为空到配置页填写播放器地址jump模式没有跳转地址为空或浏览器拦截了window.open弹出窗口确认 URL 已填写允许该站点弹出窗口iframe模式页面空白媒体服务器禁止被 iframe 嵌入X-Frame-Options / CSP改用jump模式或检查媒体服务器是否允许嵌入换了浏览器后设置丢失设置存于浏览器 localStorage在新浏览器中重新配置一次源码索引设置存储与 URL 归一化webui/src/store/player.ts配置界面组件webui/src/components/setting/config-player.vue播放器页面iframe 渲染与空状态引导webui/src/pages/index/player.vue路由守卫中的 jump 跳转逻辑webui/src/router/index.ts官方文档docs/en/config/player.md / docs/config/player.md赞分享后端前端音视频【免费下载链接】Auto_BangumiAutoBangumi - 全自动追番工具项目地址https://gitcode.com/gh_mirrors/au/Auto_Bangumi点击查看免费下载相关推荐Media Player Classic-HC开源播放器的完全配置指南Media Player Classic HC开源播放器的完全配置指南 Media Player Classic HC作为一款完全免费的开源媒体播放器凭借其音视频桌面应用视频json-diff实战案例如何用--sort和--keys-only解决数组与对象对比难题json diff实战案例如何用 sort和 keys only解决数组与对象对比难题 json diff是一款强大的JSON结构对比工具能够帮助开发者快速开发工具实战指南基于YOLOv5的12种中文车牌识别系统深度解析与部署实战指南基于YOLOv5的12种中文车牌识别系统深度解析与部署 想要在智能交通、停车场管理或安防监控中实现精准的车牌识别吗Chinese_license_p人工智能计算机视觉深度学习OCR上一篇如何用kill-doc轻松下载30文档平台的免费资源下一篇QKeyMapper终极指南Windows平台最强大的开源按键映射解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考