mpv.js
适用于Electron/NW.js应用程序的全格式可嵌入播放器。
由出色的mpv提供支持。
获取libmpv
要尝试mpv.js,你首先需要安装mpv库。
- Windows:下载mpv-dev,解压后将相应的
mpv-1.dll
放入C:\Windows\system32
- macOS:
brew install mpv
- Linux:
apt-get install libmpv1 libavformat-dev
示例
简单的Electron应用程序能够处理几乎所有可用的视频,这要归功于mpv。运行:
git clone https://github.com/Kagami/mpv.js.git && cd mpv.js
npm install
# 仅在Linux上:npm run use-system-ffmpeg
npm run example
使用方法
添加npm包
npm install mpv.js --save
该包包含所有主要平台的预构建二进制文件,因此无需设置编译器。
在主进程中加载插件(Electron示例)
const path = require("path");
const {app} = require("electron");
const {getPluginEntry} = require("mpv.js");
// 插件目录的绝对路径。
const pluginDir = path.join(path.dirname(require.resolve("mpv.js")), "build", "Release");
// 详情请参阅陷阱部分。
if (process.platform !== "linux") {process.chdir(pluginDir);}
// 适用于最新的Electron。
app.commandLine.appendSwitch("no-sandbox");
// 支持更广泛的系统。
app.commandLine.appendSwitch("ignore-gpu-blacklist");
app.commandLine.appendSwitch("register-pepper-plugins", getPluginEntry(pluginDir));
创建BrowserWindow
时不要忘记启用plugins
功能:
const win = new BrowserWindow({
// ...
webPreferences: {plugins: true},
// ...
});
使用MPV组件(React示例)
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)}
/>
);
}
}
目前仅提供React组件。
另请参阅
- mpv属性文档
- mpv命令文档
- ReactMPV源码包含JSDoc API注释
- 示例播放器源码展示了更高级的用法
打包
基本上你只需要发布mpvjs.node
和mpv库。确保它们以及Electron/NW.js发行版都具有相同的位数!
Windows
你可以使用lachs0r构建。将mpv-1.dll
复制到mpvjs.node
所在的目录即可。
macOS
Homebrew可以编译libmpv.1.dylib
及其所有依赖项。要查找需要打包的dylib并修复安装名称,你可以使用collect-dylib-deps脚本。
Linux
通常有两种可接受的选择:
- 要求用户使用包管理器安装
libmpv1
,或者如果你构建软件包,直接依赖它。 - 使用例如mpv-build编译静态的
libmpv.so
。
陷阱
插件路径不能包含非ASCII符号
这是Chromium的pepper_plugin_list.cc限制。要解决这个问题,可以使用相对路径。
在Windows和Mac上,可以通过将工作目录更改为存储mpvjs.node
的路径来实现。在Linux上,由于zygote架构,你不能在主进程中更改渲染器进程的CWD,所以另一种解决方法是在包装脚本中直接cd
到插件目录。
getPluginEntry
帮助函数将给你应用了这个修复的插件入口字符串。
在Linux上libmpv与Electron的libffmpeg链接
在Linux上,使用register-pepper-plugins
加载的插件会继承electron
二进制文件的符号,这导致了一个不幸的效果:libmpv将使用Electron的库,这是不支持的。
要解决这个问题,你需要用链接到libav*
的空包装器替换libffmpeg.so
:
gcc -Wl,--no-as-needed -shared -lavformat -o /path/to/libffmpeg.so
或者使用静态链接libav*
的libmpv。
在x86上构建
要自己构建mpvjs.node
,你需要设置开发环境。
步骤1:设置node-gyp
请参阅安装部分。
- Windows:需要Visual Studio 2013
步骤2:设置NaCl SDK
请参阅下载页面。
- Windows:将
nacl_sdk.zip
解压到C:\
- macOS和Linux:在
~/.bash_profile
中添加export NACL_SDK_ROOT=/path/to/pepper_49
步骤2.1:在Windows上编译64位NaCl主机二进制文件
- 打开
C:\nacl_sdk\pepper_49\tools\host_vc.mk
并将32_host
替换为64_host
- 打开命令提示符,运行
"C:\Program Files (x86)\Microsoft Visual Studio 12.0\VC\vcvarsall.bat" amd64
- 运行
cd C:\nacl_sdk\pepper_49\src
和make TOOLCHAIN=win PROJECTS="ppapi_cpp ppapi_gles2"
步骤 3:设置 mpv 开发文件
- Windows:下载 mpv-dev,解压到
C:\mpv-dev
- macOS:
brew install mpv
- Linux:
apt-get install libmpv-dev
步骤 4:构建插件
- 在项目目录中运行
node-gyp rebuild
- 在64位 Windows 上构建32位版本的插件,运行
node-gyp rebuild --arch=ia32
在 ARM 上构建
重要: Electron 1.8.x ARM 版本存在问题,请改用 2.x 或 1.7.x 版本。
注意: 以下说明已在 Raspberry Pi 3 上测试过,查看更多信息。
步骤 0:启用硬件图形加速
- 运行
sudo raspi-config
- 选择高级选项,然后选择 GL 驱动程序,再选择 GL (Full KMS) OpenGL 桌面驱动程序与完整 KMS。配置完成后,您将看到以下消息:"已启用完整 KMS GL 驱动程序"
- 选择
<确定>
然后<完成>
,raspi-config 工具将询问您是否要重启 - 选择
<是>
重启系统并应用配置更改
步骤 1:设置 node-gyp
参见安装部分。
步骤 2:设置 NaCl SDK
NaCl SDK 本身只能在 x86 上运行,所以您不能使用 ./naclsdk
。相反,您需要直接下载 pepper 的压缩包并解压到某个目录。然后在 ~/.bash_profile
中添加 export NACL_SDK_ROOT=/path/to/pepper_49
。
步骤 3:设置 mpv 开发文件
apt-get install libmpv-dev
步骤 4:编译 ARM 主机二进制文件
运行 cd /path/to/pepper_49/src
和 make TOOLCHAIN=linux PROJECTS="ppapi_cpp ppapi_gles2" CFLAGS="-D_GLIBCXX_USE_CXX11_ABI=0"
。
步骤 5:构建插件
完成上述过程后,回到 mpv.js 目录并运行 node-gyp rebuild
。
使用 mpv.js 的应用程序
欢迎通过 PR 添加您自己的应用程序。
许可证
mpv.js 本身采用 CC0 许可。但是,如果您使用 GPL 版本的 libmpv(例如 lachs0r 构建),您的应用程序可能会违反 GPL 动态链接限制。LGPL 构建应该是安全的,详情请参阅 mpv 版权信息。(这不是法律建议。)
示例视频是 Tears of Steel 电影的一部分,版权所有 (CC) Blender Foundation | mango.blender.org。
标志由 @SteveJobzniak 设计。