An userscript to fix video player issues of ASU Canvas (the website to take ASU online courses)
A helper to fix video player issues of ASU Canvas (the website to take ASU online courses)
See discussions on r/ASU
Visit Github for more info
| Action | Key |
|---|---|
| Play/Pause | k |
| Rewind 5s | j |
| Forward 5s | l |
| Decrease Speed | < (SHIFT+,) |
| Increase Speed | > (SHIFT+.) |
| Prev Video | P (SHIFT+p) |
| Next Video | N (SHIFT+n) |
| Fullscreen | f |
| Toggle Mute | m |
| Decrease Volumn | ↓ |
| Increase Volumn | ↑ |
| Toggle Caption | c |
| Decrease Caption Size | - or _ |
| Increase Caption Size | + or = |
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.
// @require file://<absolute path to the cloned repo folder>/helper.user.jsbrew install entr; brew install chrome-clichrome-cli infols *.js | entr zsh -c 'chrome-cli reload -t <tabId>'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