Danbooru Animated Captions

Demo

Demo post #5843334 | Demo DMail link | Demo gist link | Demo pastebin link

demo.mp4

Other example posts: posts #4287071 | posts #4345939

Installation

1. Install Tampermonkey or Greasemonkey.

2. Install AnimatedCaptions.user.js

3. Enable the script in Tampermonkey or Greasemonkey then refresh Danbooru.

Usage

In any post that contains a .mp4 or .webm content, there will be an input box above the video.

1. In that input box, copy and paste the link to a pastebin, gist, or similar website containing valid VTT text for the post. Alternatively, a link to a DMail can be used; however, the DMail should contain nothing else but the VTT text.

2. Click on the Apply subtitles! button.

3. The video should now have subtitles in the controls (CC icon).

As of v2022.12.22.2, WebVTT source file links in the artist commentary will be auto-detected. The link must be formatted as a DText hyperlink with the custom text "WebVTT". For example, check the translated commentary section in post #5843334.

For subtitlers

If you would like to create VTT subtitle files manually via a text editor, you can check out the MDN documentation for WebVTT for the syntax as well as CSS styling options.

Alternatively, there are subtitle editor softwares out there that export to .vtt, such as VTT Creator (web-based) or SubtitleEdit (downloadable software).

In order to cater towards users who aren't using the script, subtitlers would have to rewrite the time-stamped text in the artist commentary section in addition to the WebVTT file. For that, I'm thinking of adding a generator that can convert .vtt into simpler, human-readable format.

Subtitlers can also click on the Copy subtitles! button next to the Apply subtitles! button for a human-readable version of subtitles, instead of rewriting the entire subtitles for other users to see.

Known issues

1. Auto-detection not working in Safari Userscript