Correct the video player size
Convert pdf caption to srt caption
And turn the caption on by default
Provide a download button to download both the caption and the video with appropriate filenames
Pass keypress from Canvas to the video player, so you can use keyboard shortcuts immediately, without the need of clicking to focus the video player at first
Supported youtube style keyboard shortcuts

Keyboard Shortcuts

Usage (TLDR)

Assumed that you're using chrome and know what's ASU Canvas (the website u take your ASU online courses)

Install Tampermonkey: Click this to open the link, then hit "Add to Chrome" -> "Add Extension"
Install ASU Canvas Helper: Click this to open the link, then hit "Install this script" -> "Install"
Go to your ASU course link and log in, for example this course, then a tab will popup warning "A userscript wants to access a cross-origin resource.", click "Always allow domain" button in the bottom-left corner. Then chrome will jump back to the course tab.

The warning is due to the domain of the video is different than the domain of the web page, thus downloading the video would make a cross domain request. It's safe to allow it.)
Under the video, there will have a new button "Download All", hit that button to download both video and subtitle (the download progress might not immediately show up, just keep waiting until both files are downloaded, and the "Download All" button will become "Finished!"
Play the online video or downloaded video, enjoy !

Having just joined the ASU online Master of CS program, I found that its online course system -- the Canvas, is buggy and hard to use:

The video player size is too small, you have to fullscreen it to watch.
Some video is in India accent, it's a little difficult for someone who's not been exposed to India accent a lot to follow what the video speaks. I have to turn on captions.
But the caption is always broken, you can't turn it on since the link to the caption is dead.
Sometimes there're captions in pdf format for downloading which is very weird. And availability is not guaranteed.
If no caption pdf is provided, I have to turn on Live Caption in Chrome. But when I fullscreen the player, it'll block the live caption.

So I dig into source code of the website and write a script that helps with these player issues. It's been tested on these courses.

I use combinations of VScode(with nvim plugin), Tampermonkey, Greasyfork, Chrome, entr, chrome-cli on MacOS to develop the script.

In Chrome, Go to Settings -> Extensions -> Tampermonkey -> Details -> Allow access to file URLs, and turn it on
In Tampermonkey, create a new script and delete the template content
Clone the repo, copy only the userscript headers from helper.user.js into Tampermonkey's editor, then copy below line into the headers in Tampermonkey editor. > // @require file://<absolute path to the cloned repo folder>/helper.user.js
Install entr and chrome-cli by brew install entr; brew install chrome-cli
Open an ASU online course link, make sure Chrome only have a single window and the course tab is active
Find the tab's ID by running chrome-cli info
Cd to the repo folder, run ls *.js | entr zsh -c 'chrome-cli reload -t <tabId>'
Do your edit to helper.user.js with any IDE, the course tab will refresh on every save of the script, and test your work in the course tab.
To debug player state, opt+cmd+i to open devtools, shift+cmd+c and click on the video player (to make iframe context available in devtools console), then paste below code to get the player instance js function getReactFiber(selector) { const dom = document.querySelector(selector) const key = Object.keys(dom).find(key=>{ return key.startsWith("__reactFiber$") // react 17+ || key.startsWith("__reactInternalInstance$"); // react <17 }); return dom[key] } player = getReactFiber('div.MediaPlayer').child.ref.current.plyr

[x] Save Caption Size setting for next video
[ ] Fix Toggle Caption shortcut (not properly working)
[ ] Fix Volumn UP/DOWN shortcut (not properly working)
[ ] Draw an icon. e.g. A devil stabs a big hole on a canvas from behind.
[ ] Make a comparison video showing the difference before/after applying this userscript
[x] Add an 'Install Script' button to this landing page, similar to the Greasyfork one
[ ] Github action to autoly publish the script to Greasyfork on git push

A proper landing page is created, you can find detailed install instructions there: Github Greasyfork
Keyboard shortcut support is added: Rewind/Forward; Decrease/Increase Speed; Prev/Next Video; Decrease/Increase Caption Size. Keybindings are identical to youtube. See the landing page for detail.
Key press events in Canvas page will now be forwarded to the video player (they're on different domains), which means you can use keyboard shortcuts immediately when Canvas page loaded, without having to click and focus the video player to activate keyboard shortcuts.