YT-DLP Web Player 是一款由 Matszwe02 开发的基于 Web 的视频播放器，利用开源工具 yt-dlp 进行视频解析和下载。其解决了在线视频播放体验中的一些痛点，例如跨平台兼容性、自定义功能扩展等。在现有的在线视频平台中，因为版权和用户体验的考量，用户难以实现下载或深度定制功能；而以 yt-dlp 为核心的 Web播放器则打破了这些限制，允许用户通过网络链接直接播放视频且支持下载。
核心技术揭秘
YT-DLP Web Player 的核心技术和实现手段令人印象深刻。项目主要采用了 Flask 框架作为后端 API，前端则由 Vue.js 构建，两者共同协作确保了视频播放的无缝体验。
graph TD
A[用户请求视频链接] --> B[Flask API 收到请求]
B --> C{"解析视频链接"}
C -->|"结果"| Z1[D[视频流信息]]
D --> E[Vue.js 前端展示]
E --> F{"播放/下载选项"}
F -->|"播放"| G[视频播放]
F -->|"下载"| H[视频下载]
功能亮点与差异
YT-DLP Web Player 提供了一个高度可定制和灵活的视频播放解决方案，这使其区别于市场上其他类型的在线视频播放器。它的主要亮点包括：
everything you would expect a modern player to have
fast loading speed (most videos load within 4s)
paste video URL / type search query / auto pasting from clipboard
zoom to fill for all devices
download, repeat videos
audio visualizer for music
PWA support with “share with” target for Android and IOS
clean UI, configurable theme color
basic livestream support
browser extension to allow including this player on every website, which also adds Open link in YT-DLP Player browser-wide context menu
embedding using /iframe?url=... endpoint
some of these features are off by default and need to be turned on in .env
Daily auto update of yt-dlp to immediately support new yt-dlp codecs and sites
Technologies used
HLS for shorter load times and better performance
videojs to support custom video elements
yt-dlp for video download
ffmpeg for better format support
sponsorblock for supported sites (currently YouTube)
Media Session API integration for system playback controls
Audio Context API for audio over-amplification and audio visualizer
Planned
video quality changing without interrupts
high quality playback without transcoding
user-side player configuration
Limitations
only YT-DLP supported videos work
video loading times and fallbacks:
most videos load in less than 4 seconds, skipping transcoding until it starts (“Direct” in resolution seleciton)
if it fails, most of remaining videos load in ~10s, when transcoding starts
if it also fails, the whole video is getting downloaded until it becomes available
all videos are being transcoded to HLS in realtime, so you need a machine that could handle that
transcoding works from start of the videos, so you need to wait for later parts to buffer. For now the only alternative is to switch to “Direct” in resolution selection
project is under heavy development - you may expect bugs and issues
then you can access the app with https://localhost:5001
your browser will warn you about not secure connection, you need to click on allow
2. Run locally
Create and activate a virtual environment in src/ and install requirements.txt
Install and ensure you have ffmpeg in PATH (typing ffmpeg in console should display ffmpeg info)
Install and ensure you have deno or node in PATH (optional)
run with python3 main.py
Configure
Copy src/example.env to src/.env, modify as needed
See compose.yml for additional configuration mentioned in Docker section
Cookies
Some videos need cookies to work. With cookies you will be logged in to the video streaming’s website while using the app.
Create src/cookies.txt file and enable in compose.yml (if using docker)
Paste relevant cookies into that file (I suggest using an extension for that, which exports cookies in netscape format)
yt-dlp created a nice guide about providing the cookies
If using extension, you can enable automatic sending of browser cookies for individual videos in extension settings
Keep in mind that cookies work the same way as your account credentails - anyone having them may mess up your account.
I do not guarantee that cookies file is completly secure from accessing it through the player. Additionally yt-dlp uses them when playing videos on behalf of the provided account. So I only recommend putting throwaway accounts here.
Browser Extension
What it does
Adds Open in YT-DLP Player context menu for all links. So you can right-click any supported link and it is opened in YT-DLP Player directly.
Replaces every video in allowed (in extension settings) domains with YT-DLP Player. That results with all of the default video players to be seamlessly replaced with YT-DLP Player.
Installation
You can install the extension by downloading repo and selecting /extension path to import into browser’s extensions
Alternatively you can load /extension/extension.js (or copy extension js from Web UI) with tampermonkey, or paste it into dev tools console
For some websites you need to have one of disable CSM extensions
Working principle
This extension will disable all media playback on selected websites
it’s by design, so keep in mind that no playback will be possible while the extension is active
It will spawn iframe directly in <body> and search for the best container to hover that iframe above it
it is designed like that so DOM won’t be significantly altered
it sends your website’s cookies to the server with each request, then tries to mark video as watched (if enabled)
That container gets opacity:0 and pointer-events:none so it can’t be interacted with
It will watch for any change to update iframe’s position or container
Troubleshooting
I can’t install PWA / embed it as an iframe / extension does not load
If it appears to be supported, fill in a bug report with app logs.
Livestream doesn’t work
YT-DLP Web Player is very limited with this feature.
Try using cookies or waiting 30s for the video to buffer before hitting play.
Can this app do XYZ?
This readme does not mention every configuration option. See example.env and check if the feature you want is already settable. If not, I’m open for feature requests.
Other issues
Please fill in a bug report. Attach browser and app logs if relevant, app version, browser name, etc.
评论