View youtube-dl backups on a youtube-like webpage
AGPL-3.0 License
This is a (cross platform, standalone) web app to display videos downloaded by youtube-dl (or similiar tools) and view them inside your browser in a nice (youtube-like) UI.
Download from the github releases section
Also available from my personal website
The easiest way to use is to simply drop the binary in the directory with the video files, run it and open the displayed URL in your browser.
For a bit more customization you can create a .bat
or .sh
wrapper to run it with a few parameter
REM Example:
REM (remove comments before copying)
youtube-dl-viewer.exe ^
--cache="C:\Users\me\AppData\Local\Tempytdl_cache" ^ # specify cache directory for generated thumbnails
--videomode=vlc-local ^ # default to local vlc protocol links for playback
--open-browser # autom. open browser after startup
Another use case is to have your video files synchronized to a server and host a permanent instance of youtube-dl-viewer there. Then you can either access it directly via the specified port or use nginx/apache as a reverse proxy
#!/bin/bash
DOTNET_BUNDLE_EXTRACT_BASE_DIR=/home/web_aspnet/dot_net_cache/
export DOTNET_BUNDLE_EXTRACT_BASE_DIR
./youtube-dl-viewer --port=9876 \
--cache="/media/youtube-dl-viewer_cache/" \
--display=grid \
--order=date-desc \
--width=medium \
--thumbnailmode=intelligent \
--videomode=transcoded \
--path="/media/nextcloud/data/Mikescher/files/Videos/YoutubePlaylist1" \
--path="/media/nextcloud/data/Mikescher/files/Videos/YoutubePlaylist2" \
--path="/media/filecloud/data/Mikescher/files/Videos/YoutubePlaylist3"
<VirtualHost *:80>
ServerName example.com
ProxyPreserveHost On
ProxyRequests off
ProxyPass / http://127.0.0.1:9876/
ProxyPassReverse / http://127.0.0.1:9876/
ErrorLog /var/log/apache2/error_youtube-dl-viewer.log
LogLevel warn
CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>
For synchronization you can use for example nextcloud, but every solution where youtube-dl-viewer can access the raw files on your filesystem works.
You can use any youtube-dl parameters as you want.
youtube-dl-viewer will use any data it has, the only necessary file is the actual video. But it will also use and display available metadata (aka *.info.json
, *.description
and thumbnails).
My youtube-dl parameters are these:
youtube-dl
--download-archive "{archive_location}"
--output "{ouput_location}\%%(playlist_index)s - %%(title)s.%%(ext)s"
--format "bestvideo+bestaudio/best"
--no-overwrites
--restrict-filenames
--ignore-errors
--write-description
--write-info-json
--write-annotations
--write-thumbnail
--all-subs
--recode-video mkv
"https://www.youtube.com/{playlist_url}"
If you start backup from scratch I would recommend to use --recode-video webm
. webm (or mp4) is by default a format that can be streamed to your browser, this way you can easily watch the directly in your browser.
Otherwise you can either use the transcoded webm stream
option, where the video is live transcoded via ffmpeg (needs to be installed), or the VLC protocol link where the file is streamed to your VLC media player
youtube-dl-viewer supports playing the videos by clicking on them, there are multiple modes for this available:
--no-ffmpeg
to disable all ffmpeg dependent functionality.--exec-ffmpeg
and --exec-ffprobe
--webm-convert-params
.--cache
path where past converted videos will be remembered so that the next time the converted artifacts will be re-used.--max-parallel-convert
parameter.vlc://...
link to the video file. This is useful if your videos are in a format that's generally streamable but simply not supported by your browser (a common example is mkv).vlc://
protocol and the fact that the video format is supported by VLC.You can supply multiple --path="{path}"
arguments, the first one will be used by default and you can switch to a different path in the top left area of the website.
Via the reload button in the top right you can force a re-scan of all the video and metadata on the filesystem, this is usually only done on application startup.
youtube-dl-viewer can use ffmpeg to transcode the video file to a webm file and stream it directly to the user. A working ffmpeg installation is required and needs to be accessible. Youtube-dl-viewer will simply call the ffmpeg command with the appropriate parameters. Simply select Transcoded webm stream in the top right corner as your playback mode to choose this.
If you do not have (and do not want) a ffmpeg installation you can start youtube-dl-viewer with the command --no-ffmpeg
to disable all ffmpeg dependent functionality.
You can tweak the ffmpeg parameters with the parameter --webm-convert-params
, the default values are optimized for fast transcoding, if you want you can change that to a more quality-oriented approach.
Depending on the video, the parameter and you machine ffmpeg may not be able to encode the video fast enough for a smooth playback.
To fix this prolem (at least a bit) you can supply youtube-dl-viewer with a --cache
path where past converted videos will be saved.
The next time you want to play that specific video the cached files will be used.
You can limit the maximum amount of parallel ffmpeg conversion jobs with the --max-parallel-convert
parameter.
[!] Note If you already have your files in .webm format (or an appropriate .mp4) you can skip all this complexity and simply serve the files directly via the Seekable raw file playback mode. And if you only use youtube-dl-viewer on a single computer you control it would also be easier (and yield better results) to install the VLC URL protocol and use that playback mode.
By default youtube-dl-viewer uses the thumbnails that it finds with the video file (either referenced in the info.json file, or a image file with the same filename as the video). But if there isn't a suitable thumbnail it uses ffmpeg to generate one from the video file. This uses the same behavior as ffmpeg generated previews, we simply generate the preview images (see below) and use the second preview image as our thumbnail. For more information see the following section.
This can be deactivated (as all ffmpeg dependent functionality with the --no-ffmpeg
parameter)
In Grid
and Detailed
mode you can hover over a video thumbnail and see an animation consisting of multiple frames from the video.
These frames are extracted using ffmpeg at regular intervals. Because it can take a few seconds to get the images (depending on your machine and the video) it is recommended to specify a --cache
directory where the preview files will be cached.
You can modify this behavior with the following program arguments:
--preview-width
: The width of the generated image files (the height is automatically calculated)--max-parallel-genprev
: The maximum amount of parallel preview-generation jobs.--previewcount-min
: The minimum amount of preview frames per video file (can still be less if the video is too short)--previewcount-max
: The maximum amount of preview frames per video file--thumnail-ex-mode
: Choose one of the three ways to extract the frames:
sequential
: Sequential: Call ffmpeg multiple times for each frame, one call after the otherparallel
: Parallel: Call ffmpeg multiple times for each frame, all calls parallel (can lead to many simultaneous ffmpeg processes)singlecommand
: SingleCommand: Call ffmpeg oce with the appropriate filter arguments, leads to frames that are more precisely positioned (at the exact timestamps), but takes longer.If the video does not have a provided thumbnail the second (!) preview frame is also used as an thumbnail
[!] Note If a cache directory is specified youtube-dl-viewer will try to generate previews for all videos in the background so that for all videos cached previews will exist. To disable this use the
--no-auto-previews
option
This can be deactivated (as all ffmpeg dependent functionality with the --no-ffmpeg
parameter)
The playback modes VLC protocol link (stream) and VLC protocol link (local) use "VLC URL protocol" links (vlc://...
).
This means they try to launch your locally installed VLC player with a specific URI (either a local file or a streamable link).
Your client needs to support these links, the easiest way is to use the ready-made scripts from stefansundin.
Note for Firefox If you are often restarting youtube-dl-viewer and everytime use a different (random) port firefox will always warn you with the popup:
Allow this site to open the PROTOCOL link with APPLICATION?
To permanently allow (all) external protocols go toabout:config
and set the valuesecurity.external_protocol_requires_permission
to false
As soon as you intend to do anything work intensive (ffmpeg live transcode, generated thumbnails, preview frames) it is very recommended to specify a cache directory to cache the results of these jobs. Files in the cache directory normally contain the sha256sum of video file path in their filename to identify them (under windows its the relative path to support removable media). You can at any time delete some or all files in the cache directory (e.g. only keep the newest x files) and the files will be re-created the next time they are needed.
In the top right corner you can choose the thumbnail loading mode (you can also specify the default as an program argument).
Off Do not load thumbnails (or preview frames)
On (sequential) Load all currently visible thumbnails one after the other
On (parallel) Load all currently visible thumbnails in parallel
On (intelligent) Load the currently visible thumbnails in parallel and pre-load non-visible thumbnails sequentially in the background
By specifying one (or more) --path
arguments you can set the directori(es) where the program looks for video files.
But instead of a simple directory-path you can also supply a json object in the --path
argument for more fine-tuning, eg: --path="{path:'/home/me/videos', name:'My Videos'}"
.
Every path json object must have a path
property, and can have the following optional properties:
name
: The display string, used eg in the top-left dropwdown menu. (default = use value of path
)use_filename_as_title
: Use the filename as the video title instead of value in the info.json file (default = false)recursion
: The maximum recursion depth when searching for videos (default = 0, aka "do not recurse into subfolders")filter
: The filter for the files (default = "*", aka every file). Supported video extensions are filtered in a secondary step.ext_order
: Path to a file with a user-defined order (the format is the same as the youtube-dl archive files).update_ext_order
: Automatically add missing files to the end of the ext_order
file (default = true).htmltitle
: Specify a custom title for the webpage when this path is selecteddisplay
: Override the default display value (from --display=<v>
) for this pathwidth
: Override the default list width value (from --width=<v>
) for this pathorder
: Override the default order (from --order=<v>
) for this pathvideomode
: Override the default playback mode (from --videomode=<v>
) for this paththumbnailmode
: Override the default thumbnail loading mode (from --thumbnailmode=<v>
) for this paththeme
: Override the default theme (from --theme=<v>
) for this pathdisplay_disabled
: Disable some display modes for this pathwidth_disabled
: Disable some list widths for this pathorder_disabled
: Disable some ordering modes for this pathvideomode_disabled
: Disable some playback modes for this paththumbnailmode_disabled
: Disable some thumbnail modes for this paththeme_disabled
: Disable some themes for this pathExample configuration:
--path="{
path:'/media/youtube-dl/Talks',
order:'title',
name:'Talks',
ext_order:'/media/order_talks.txt',
htmltitle: 'Playlist: Talks',
videomode:'transcoded',
videomode_disabled: ['raw-seekable', 'raw', 'vlc-local']
}"
[!] Note Under windows (and linux if there are any) do not forget to escape your backslashes:
--path="{path:'C:\\Users\\Me\\Videos', name:'My Videos', ext_order: 'order.archive.txt'}
There is currently only 1 integrated theme: default
.
But you can supply one (or more) custom themes with --usertheme=<path>
arguments.
Then you can either choose the themes with the theme button n the top right corner or you can set a default theme with the --theme=<name>
argument.
Themes must be valid css files, see staticfiles/theme_default.css for an example
Video metadata is first read from the video file and the matching (same filename) additional files eg .vtt
subtitles or .description
descriptions.
Then (if one exists) the .info.json
file (generated by youtube-dl) is read for additional data.
In case you want to override some fields (or don't have a info.json) you can, as a third step, create a {filename}.info.toml
file to override/specify metadata fields.
The following keys are valid:
You can (and should) run youtube-dl-viewer --help
to get a list of all available commandline arguments and their possible values.
Here are some common and useful arguments:
--port=<value>
:--ip=<value>
:--cache=<value>
:--display=<value>
, --order=<value>
, --width=<value>
, --thumbnailmode=<value>
, --videomode=<value>
:--max-parallel-convert=<value>
, --max-parallel-genprev=<value>
:--preview-width=<value>
, --thumnail-ex-mode=<value>
, --previewcount-max=<value>
, --previewcount-min=<value>
, --no-auto-previews
, --no-ffmpeg
:--webm-convert-params=<value>
, --no-ffmpeg
:--autorefresh-interval=<seconds>
:--htmltitle=<value>
:--version
:--help
:If your browser tells you No video with supported format and MIME type found
that means that the specified playback mode (button in top right corner) failed.
If you are on Seekable raw file
or Raw file
that means that the video files on your hard drive are not supported by your browser (generally only webm and mp4 are supported and in my experience only webm works good).
If you are on Transcoded Webm stream
that means that youtube-dl-viewer could not live transcode your video file.
First please look at the output of youtube-dl-viewer to see what exactly happened.
Common problems are:
By specifying a dirctory in the --ffmpeg-debug-dir
argument you can inspect the ffmpeg output.
For every ffmpeg call we make a new file is created with the invoked command, ffmpeg output and exit code.
This is especially useful for cases where some specific codec is not supported by your ffmpeg version
If you get the following error on start (on linux):
realpath(): Permission denied
Failure processing application bundle.
Failed to determine location for extracting embedded files
DOTNET_BUNDLE_EXTRACT_BASE_DIR is not set, and a read-write temp-directory couldn't be created.
A fatal error was encountered. Could not extract contents of the bundle
You need to set DOTNET_BUNDLE_EXTRACT_BASE_DIR
to a valid path in your run script (or somewhere else such that the environment variable is set)
#!/bin/bash
DOTNET_BUNDLE_EXTRACT_BASE_DIR=/tmp/dot_net_cache/
export DOTNET_BUNDLE_EXTRACT_BASE_DIR
./youtube-dl-viewer
The view mode Tabular
uses the css subgrid feature which is currently only supported in firefox. Which is great because I generally recommend people to not support that other company that tries to have a monopoly of every internet related thing...