Skip to content

9at8/watch-and-learn

Repository files navigation

Watch and Learn

/static/icon128.png

A browser extension that replaces Learn’s default video and audio player with video.js.

Install from the chrome store

Features and Screenshots

Binge mode

Now you can “Learn and Chill”!

/assets/binge-mode.gif

3x playback rate

/assets/playback-rate.png

Default playback rate for all lectures

All videos will run at this rate without you needing to do anything. The default is 1x. You can also increment it in 0.05 step intervals.

/assets/default-playback-rate.jpg

Picture in picture

/assets/pip.png

Reviews

  • Makes dealing with the reality of video lectures a bit more manageable” - 4B CS student
  • MY LIFE HAS CHANGED! I no longer hate watching lectures on learn :)” - 4B CS student
  • and (potentially) many more … (open an issue to add yours here!)

Why?

The default video and audio player on Learn does not work well enough. It’s missing a lot of keyboard shortcuts, seeking tracks is not precise and does not support picture in picture, which most browsers support.

This extension replaces the default player with a video.js player.

Video.js is an extensible video player for browsers, has a lot of plugins, and is used by a lot of companies in production. Watch and Learn leverages it to offer the following features:

  • playback rates up to 3x on all videos and audios
  • picture in picture support
  • keyboard shortcuts like ‘M’ to mute, ‘Space’ to pause/play, ‘F’ to fullscreen, and many more using the ‘videojs-hotkeys’ plugin

Known Issues

See issues - https://github.com/9at8/watch-and-learn/issues

Installation (recommended)

  1. Install from the chrome store

Installation (from zip)

  1. Download the zip from the latest release and unzip it
  2. Open chrome://extensions
  3. Enable developer mode
  4. Click on “Load unpacked”, and pick this directory

Contributing

  1. Clone this repo
  2. yarn
  3. yarn run build if you’re installing
  4. yarn run build:watch if you’re testing
  5. Open chrome://extensions
  6. Enable developer mode
  7. Click on “Load unpacked”, and pick this directory