On macOS I got tired of dragging webvtt files onto TextEdit to view them, so I wrote a Quick Look plugin so you can just select the .vtt file and press the space bar to preview them.
You’ll need to download the WebVTT Quick Look plugin and install it in the ~/Library/QuickLook folder. To view the Library folder from the finder, select the Go menu in the menubar, and hold the Option key (⌥). Drag the uncompressed WebVTT Quick Look plugin file to QuickLook folder.
You can either restart your Mac, or use the Terminal and enter the command: qlmanage -r
Using the terminal command above means you don’t have to restart your Mac.
Here’s where I got the information to write this plugin: Creating a Quick Look plugin.
Testing WebVTT captions some more so I can compare them to how YouTube renders the captions vs Quicktime and browsers.
Html 5 and Quicktime render a little differently (not shown here). Quicktime with WebVTT captions embedded in the video has a built-in ‘safe-area’ where it displays Closed Captions, so captions can’t be displayed right at the edges of the video.
Youtube has some quirks. Left align does not work, vertical position is uneven, and right align only works if you add a space after the colon in the markup (i.e. “align: right” works, “align:right” does not.)
mp4 video below with sidecar WebVTT Closed Captions:
Youtube video with the same WebVTT Closed Captions file showing inconsistencies in vertical spacing and left alignment that doesn’t work.