YouTube on Firefox skips frames and neither Google nor Firefox seem to have the incentive to fix it, let's do it ourselves. When this is done, we can watch YouTube videos in the browser with smooth playback using mpv as the video player backend.

Note: This guide is for Linux operating systems with Firefox but should be simple enough for adapting to Windows with Chromium based browsers.

1. Install 'ViolentMonkey'¹ extension to manage user-scripts in the browser.

2. Install 'Play with MPV'² script in the ViolentMonkey.

3. Install 'yt-dlp'³ to download audio/video to our system.

4. Install 'mvp'⁴ to play the video and audio in mpv.

5. Install 'mpv handler'⁵ to bridge yt-dlp and mpv player.

   Note: In KDE Plasma 6, xdg-mime settings i.e. x-scheme-handler didn't work to open the YT links from Firefox in mpv due to possible KDE Plasma6 issue⁶ or upstream XDG issue ⁷, so I manually set the handler in the handlers.json located in the profiles directory of Firefox.

   5.a. Find the profiles directory of Firefox using about:profiles.

   5.b. Add mpv to the schemes according to your mpv-handler path.

   {
   "defaultHandlersVersion": {},
   "mimeTypes": {
       "application/pdf": { "action": 3, "extensions": ["pdf"] },
       "image/webp": { "action": 3, "extensions": ["webp"] },
       "image/avif": { "action": 3, "extensions": ["avif"] }
   },
   "schemes": {
       "mailto": {
       "handlers": [
           null,
           {
           "name": "Gmail",
           "uriTemplate": "https://mail.google.com/mail/?extsrc=mailto&url=%s"
           }
       ],
       "action": 2,
       "ask": true
       },
       "gnome-extensions": { "action": 4 },
       "rtsp": { "action": 4 },
       "docker-desktop": { "action": 4 },
       "vscode": { "action": 4 },
       "steam": { "action": 4 },
       "discord": { "action": 4 },
       "mpv": {
       "action": 2,
       "handlers": [
           { "name": "mpv", "path": "/home/abishek/.local/bin/mpv-handler" }
       ]
       }
   },
   "isDownloadsImprovementsAlreadyMigrated": true,
   "isSVGXMLAlreadyMigrated": true
   }

Now when you go to YouTube or supported sites, you can click on the mpv icon on the bottom left and it will open in mpv.

Note: I highly recommend enabling HW acceleration on mpv for better performance and power efficiency by adding the required flag in your ~/.config/mpv/mpv.conf.

Thanks to the developers of the above mentioned scripts & tools and couple of redditors⁷&⁸ for making this possible!

Sources

1: ViolentMonkey.

2: Play with MPV.

3: YT-DLP.

4: MVP.

5: mpv handler.

6: Opening URLs/links doesn't work .

7: Add support for Plasma 6.

8: mpv HW acceleration.

9: Youtube is way slower/dropping frames on Firefox.

10: Protocol mpv://.