在线视频播放器YT-DLP Web Player

在线视频播放器YT-DLP Web Player

简介

什么是 YT-DLP Web Player ?

YT-DLP Web Player 是一个开源的在线视频播放器,基于强大的 yt-dlp 引擎。它可以帮助用户直接在浏览器中播放来自各种视频网站的内容,无需下载即可在线观看。

主要特点

  • 多平台支持:基于 yt-dlp,支持 YouTubeBilibili 等众多视频平台
  • 画质选择:支持视频分辨率选择、字幕选择和宽高比调整
  • 视频下载:提供视频下载功能,方便离线观看
  • PWA 支持:支持 Progressive Web App,可安装到手机桌面,Android 支持"分享到"功能
  • 视频搜索:内置视频搜索功能,无需离开界面即可查找内容
  • 主题定制:支持自定义主题颜色和 AMOLED 深色背景
  • SponsorBlock 集成:自动跳过 YouTube 视频中的赞助商片段
  • 每日自动更新yt-dlp 每日自动更新,及时支持新的视频网站和编码
  • 开源免费:基于 GPL-2.0 协议开源,可免费使用和修改

应用场景

  • 个人视频中心:搭建个人视频播放平台,统一管理和观看各平台视频
  • 家庭媒体服务:家庭成员共享视频播放服务,支持多设备访问
  • 嵌入式播放器:通过 /iframe 端点将播放器嵌入到其他网页中
  • 视频归档:下载并保存喜欢的视频内容,建立个人视频库
  • 无广告观看:绕过视频网站的广告,获得更纯净的观看体验
在这里插入图片描述

总的来说,YT-DLP Web Player 是一个功能强大且易于部署的在线视频播放解决方案,让你摆脱平台限制,自由观看网络视频。

安装

在群晖上以 Docker 方式安装。

在注册表中搜索 matszwe02,不太好找,下拉找到 matszwe02/ytdlp_web_player,只有一个 latest 版本,双击直接下载

docker 文件夹中,创建一个新文件夹 ytdlp_web_player,并在其中建一个子文件夹 download

文件夹装载路径说明
docker/ytdlp_web_player/data/app/download存放下载的视频

端口

本地端口使用 5038,不冲突就行,不确定的话可以用命令查一下

# 查看端口占用netstat-tunlp|grep5038
本地端口容器端口
50385000

环境

可变说明
APP_TITLEYT-DLP Player应用标题
THEME_COLOR#ff7300主题颜色
GENERATE_SPRITE_BELOW1800视频长度低于此值(秒)时生成缩略图
AMOLED_BGfalseAMOLED 深色背景
MAX_VIDEO_AGE3600视频缓存过期时间(秒)
MAX_VIDEO_DURATION36000最大视频时长(秒)
DEFAULT_QUALITY720默认视频质量
LOAD_DEFAULT_QUALITYtrue加载默认画质
PLAYLIST_SUPPORTfalse播放列表支持
DOWNLOAD_PATH./download下载路径

命令行安装

如果你熟悉命令行,可能用 docker cli 更快捷

# 新建文件夹 ytdlp_web_player 和 子目录mkdir-p /volume1/docker/ytdlp_web_player/data # 进入 ytdlp_web_player 目录cd /volume1/docker/ytdlp_web_player # 一键启动docker run -d\--name ytdlp_web_player \--restart unless-stopped \-p5038:5000 \-v$(pwd)/data:/app/download \-eAPP_TITLE="YT-DLP Player"\-eTHEME_COLOR="#ff7300"\-eGENERATE_SPRITE_BELOW="1800"\-eAMOLED_BG="false"\-eMAX_VIDEO_AGE="3600"\-eMAX_VIDEO_DURATION="36000"\-eDEFAULT_QUALITY="720"\-eLOAD_DEFAULT_QUALITY="true"\-ePLAYLIST_SUPPORT="false"\-eDOWNLOAD_PATH="./download"\ matszwe02/ytdlp_web_player 

也可以用 docker-compose 安装,将下面的内容保存为 docker-compose.yml 文件

version:'3.8'services:ytdlp_web_player:image: matszwe02/ytdlp_web_player container_name: ytdlp_web_player restart: unless-stopped ports:-"5038:5000"volumes:- ./data:/app/download environment:- APP_TITLE=YT-DLP Player - THEME_COLOR=#ff7300- GENERATE_SPRITE_BELOW=1800 - AMOLED_BG=false - MAX_VIDEO_AGE=3600 - MAX_VIDEO_DURATION=36000 - DEFAULT_QUALITY=720 - LOAD_DEFAULT_QUALITY=true - PLAYLIST_SUPPORT=false - DOWNLOAD_PATH=./download 

然后通过 SSH 登录到您的群晖,执行下面的命令:

# 新建文件夹 ytdlp_web_player 和 子目录mkdir-p /volume1/docker/ytdlp_web_player/data # 进入 ytdlp_web_player 目录cd /volume1/docker/ytdlp_web_player # 将 docker-compose.yml 放入当前目录# 一键启动docker-compose up -d

运行

在浏览器中访问 http://<群晖IP>:5038 即可进入 Web 界面

以老苏之前发的 https://www.bilibili.com/video/BV1LSwQzZEPi 为例,加载中会看到界面预览

加载成功后,就可以播放了

在这里插入图片描述

注意事项

  1. PWA 和 iframe 嵌入需要 HTTPS:如需使用 PWA 安装或 iframe 嵌入功能,需要配置反向代理启用 HTTPS
  2. 视频平台限制:部分视频网站有反爬虫机制,可能无法正常播放,可查看 yt-dlp 支持的网站列表
  3. 存储空间:视频缓存会占用磁盘空间,建议定期清理或调整 MAX_VIDEO_AGE 参数
  4. 网络要求:播放高清视频需要较好的网络带宽,建议根据网络情况调整 DEFAULT_QUALITY
  5. 安全建议:如公网访问,建议添加认证机制或限制访问 IP

参考文档

Matszwe02/ytdlp_web_player: Arbitraty internet video player powered by yt-dlp
地址:https://github.com/Matszwe02/ytdlp_web_player
yt-dlp/yt-dlp: A feature-rich command-line audio/video downloader
地址:https://github.com/yt-dlp/yt-dlp

Read more

GLM-4.6V-Flash-WEB Web界面使用指南,拖图就出结果

GLM-4.6V-Flash-WEB Web界面使用指南,拖图就出结果 你不需要配置环境、不用写一行推理代码、甚至不用打开终端——只要把一张截图拖进浏览器窗口,几秒钟后,它就能告诉你图里写了什么、画了什么、哪里有问题。这不是未来预告,而是你现在就能在本地跑起来的真实体验。 GLM-4.6V-Flash-WEB 是智谱AI最新开源的轻量级视觉语言模型,专为Web端实时交互而生。它不像某些“实验室模型”那样只存在于论文和Benchmark表格里,而是真正做到了:部署快、启动快、响应快、上手更快。一块RTX 3090,一个浏览器,一次拖拽,结果即刻呈现。 本文不讲训练原理,不列参数表格,不堆技术术语。我们只聚焦一件事:怎么用好它的Web界面?从零开始,到稳定产出,每一步都清晰可操作。 1. 为什么说“拖图就出结果”不是宣传话术? 很多多模态模型标榜“支持图文理解”,但实际用起来才发现:要装依赖、改路径、调精度、修CUDA版本、

前端防范 XSS(跨站脚本攻击)

目录 一、防范措施 1.layui util  核心转义的特殊字符 示例 2.js-xss.js库 安装 1. Node.js 环境(npm/yarn) 2. 浏览器环境 核心 API 基础使用 1. 基础过滤(默认规则) 2. 自定义过滤规则 (1)允许特定标签 (2)允许特定属性 (3)自定义标签处理 (4)自定义属性处理 (5)转义特定字符 常见场景示例 1. 过滤用户输入的评论内容 2. 允许特定富文本标签(如富文本编辑器内容) 注意事项 更多配置 XSS(跨站脚本攻击)是一种常见的网络攻击手段,它允许攻击者将恶意脚本注入到其他用户的浏览器中。

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

详细教程:如何从前端查看调用接口、传参及返回结果(附带图片案例)

目录 1. 打开浏览器开发者工具 2. 使用 Network 面板 3. 查看具体的API请求 a. Headers b. Payload c. Response d. Preview e. Timing 4. 实际操作步骤 5. 常见问题及解决方法 a. 无法看到API请求 b. 请求失败 c. 跨域问题(CORS) 作为一名后端工程师,理解前端如何调用接口、传递参数以及接收返回值是非常重要的。下面将详细介绍如何通过浏览器开发者工具(F12)查看和分析这些信息,并附带图片案例帮助你更好地理解。 1. 打开浏览器开发者工具 按下 F12 或右键点击页面选择“检查”可以打开浏览器的开发者工具。常用的浏览器如Chrome、Firefox等都内置了开发者工具。下面是我选择我的一篇文章,打开开发者工具进行演示。 2. 使用

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例)

Cursor+Codex隐藏技巧:用截图秒修前端Bug的保姆级教程(React/Chakra UI案例) 前端开发中最令人头疼的莫过于那些难以定位的UI问题——元素错位、样式冲突、响应式失效...传统调试方式往往需要反复修改代码、刷新页面、检查元素。现在,通过Cursor编辑器集成的Codex功能,你可以直接用截图交互快速定位和修复这些问题。本文将带你从零开始,掌握这套革命性的调试工作流。 1. 环境准备与基础配置 在开始之前,确保你已经具备以下环境: * Cursor编辑器最新版(v2.5+) * Node.js 18.x及以上版本 * React 18项目(本文以Chakra UI 2.x为例) 首先在Cursor中安装Codex插件: 1. 点击左侧扩展图标 2. 搜索"Codex"并安装 3. 登录你的OpenAI账户(需要ChatGPT Plus订阅) 关键配置项: // 在项目根目录创建.