All format embeddable player for Electron/NW.js applications.
Powered by marvelous mpv.
In order to use mpv.js you need to install mpv library first.
- Windows: download mpv-dev, unpack, put corresponding
mpv-1.dlltoC:\Windows\system32 - macOS:
brew install mpv - Linux:
apt-get install libmpv1
Simple Electron application yet capable of handling pretty much any available video thanks to mpv. Run:
git clone https://github.com/Kagami/mpv.js.git && cd mpv.js
npm install
# On Linux: npm run use-system-ffmpeg
npm run examplenpm install mpv.js --savePackage includes prebuilt binaries for all major platforms so no need to setup compilers.
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);}
app.commandLine.appendSwitch("ignore-gpu-blacklist");
app.commandLine.appendSwitch("register-pepper-plugins", getPluginEntry(pluginDir));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)}
/>
);
}
}Currently only React component is provided.
- mpv properties documentation
- mpv commands documentation
- ReactMPV source with JSDoc API comments
- example player source for a more advanced usage
Basically all you need to ship is mpvjs.node and mpv library. Make sure they both and also Electron/NW.js distribution have the same bitness!
You may use lachs0r builds. Copy mpv-1.dll to the directory with mpvjs.node and you are done.
Homebrew can compile libmpv.1.dylib and all its dependencies. To find dylibs that need to be packaged and fix global paths and you may use collect-dylib-deps script.
- Either ask your users to install
libmpv1with package manager (depend on it if you have e.g. PPA); see also pitfalls section - Or compile static
libmpv.sowith e.g. mpv-build
This is unfortunate Chromium's pepper_plugin_list.cc restriction. To workaround this relative path might be used.
On Windows and Mac it can be done by changing working directory to the path where mpvjs.node is stored. Unfortunately you can't change CWD of renderer process on Linux inside main process because of zygote architecture so another fix is just cd to the plugin directory in your application's run wrapper script.
getPluginEntry helper will give you plugin entry string with that fix applied.
On Linux plugins loaded with register-pepper-plugins switch inherit symbols from electron binary so it can lead to unfortunate effect: libmpv will use Electron's libraries which is not supported.
To workaround this you need to either replace libffmpeg.so with empty wrapper linked to libav*:
gcc -shared -lavformat -o node_modules/electron/dist/libffmpeg.soNOTE: This doesn't work for Electron >= 1.4.15 due to #268.
Or use libmpv with statically linked libav*.
To build mpvjs.node by yourself you need to setup dev environment.
See installation section.
- Windows: Visual Studio 2013 is required
See download page.
- Windows: unpack
nacl_sdk.ziptoC:\ - macOS & Linux: add
export NACL_SDK_ROOT=/path/to/pepper_49to~/.bash_profile
- Open
C:\nacl_sdk\pepper_49\tools\host_vc.mkand replace32_hostwith64_host - Open cmd, run
"C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\vcvarsall.bat" amd64 - Run
cd C:\nacl_sdk\pepper_49\srcandmake TOOLCHAIN=win
- Windows: download mpv-dev, unpack to
C:\mpv-dev, renameincludetompv - macOS:
brew install mpv - Linux:
apt-get install libmpv-dev
- Run
node-gyp rebuildin project directory - Run
node-gyp rebuild --arch=ia32to build 32-bit version of plugin on 64-bit Windows
Feel free to PR your own.
mpv.js is licensed under CC0 itself, however mpv.js + libmpv build is meant to be distributed as GPLv2+ due to mpv being GPL and GPL dynamic linking restrictions.
It shouldn't affect entire Electron/NW.js app though because Chromium runs plugins inside separate process and GPL FAQ doesn't restrict that. (This is not a legal advice.)
Example video is part of Tears of Steel movie (CC) Blender Foundation | mango.blender.org.
Logo is by @SteveJobzniak.