mpv.js

To use mpv.js in an Electron application, you must load the plugin in the main process and enable the plugins feature in the BrowserWindow web preferences.

Note on Pathing: Due to Chromium restrictions regarding non-ASCII characters in plugin paths, you should use getPluginEntry and potentially change the working directory for non-Linux platforms.

Note on Electron Flags: You must append the no-sandbox switch and use getPluginEntry to register the Pepper plugin.

const path = require("path");
const {app} = require("electron");
const {getPluginEntry} = require("mpv.js");

// Absolute path to the plugin directory.
const pluginDir = path.join(path.dirname(require.resolve("mpv.js")), "build", "Release");

// See pitfalls section for details.
if (process.platform !== "linux") {process.chdir(pluginDir);}

// Fix for latest Electron.
app.commandLine.appendSwitch("no-sandbox");
// To support a broader number of systems.
app.commandLine.appendSwitch("ignore-gpu-blacklist");
app.commandLine.appendSwitch("register-pepper-plugins", getPluginEntry(pluginDir));

// When creating your BrowserWindow, enable plugins:
// const win = new BrowserWindow({
//   webPreferences: {plugins: true}
// });

The library provides a ReactMPV component for React applications. You can interact with the player via the onReady callback, which provides the mpv instance. This instance allows you to observe properties, run commands, and manipulate property values.

const React = require("react");
const {ReactMPV} = require("mpv.js");

class Player extends React.PureComponent {
  constructor(props) {
    super(props);
    this.mpv = null;
    this.state = {pause: true, "time-pos": 0};
  }
  handleMPVReady(mpv) {
    this.mpv = mpv;
    this.mpv.observe("pause");
    this.mpv.observe("time-pos");
    this.mpv.command("loadfile", "/path/to/video.mkv");
  }
  handlePropertyChange(name, value) {
    this.setState({[name]: value});
  }
  togglePause() {
    this.mpv.property("pause", !this.state.pause);
  }
  render() {
    return (
      <ReactMPV
        className="player"
        onReady={this.handleMPVReady.bind(this)}
        onPropertyChange={this.handlePropertyChange.bind(this)}
        onMouseDown={this.togglePause.bind(this)}
      />
    );
  }
}

Once the onReady callback is triggered, you can use the provided component instance to control the mpv player.

Methods

• command(cmd, ...args): Sends a command to the player. All arguments are converted to strings.
• property(name, value): Sets an mpv property to a specific value.
• observe(name): Tells mpv to start sending notifications whenever the specified property changes.
• keypress({key, shiftKey, ctrlKey, altKey}): Simulates a keyboard event. It filters out modifier-only keys and certain exit keys (like q, ESC, STOP) to prevent accidental player termination. It also handles arrow key mapping (e.g., ArrowUp becomes UP).
• fullscreen(): Triggers the browser's fullscreen request on the player node.
• destroy(): Synchronously removes the plugin DOM node to clean up resources.
• node(): Returns the underlying HTMLEmbedElement.

<ReactMPV 
  onReady={(mpv) => {
    // Send a command
    mpv.command('set_pause', 'yes');

    // Set a property
    mpv.property('volume', 50);

    // Observe a property
    mpv.observe('pause');

    // Simulate a keypress
    mpv.keypress({ key: 'ArrowLeft', ctrlKey: true }); // Sends Ctrl+LEFT

    // Enter fullscreen
    mpv.fullscreen();
  }} 
/>