Electron flash插件

最新推荐文章于 2024-08-19 21:37:14 发布

younger_z

最新推荐文章于 2024-08-19 21:37:14 发布

阅读量540

点赞数

分类专栏： electron

electron 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Electron 支持 Pepper Flash 插件。要在 Electron 里面使用 Pepper Flash 插件，我们要手动设置 Pepper Flash 的路径并且应用里启用 Pepper Flash。

我们可以在chrome浏览器中输入：chrome://version/来获取浏览器的信息

其中flash信息就是我们想要的。
当然了，大家也可以去flash官网下载安装flash，安装后的目录在：C:\Windows\SysWOW64\Macromed\Flash下面。

接下来我们就开始看看怎么在electron项目中使用。这是我将pepflashplayer.dll拷贝到我工程后的目录结构（Pepper Flash 插件的操作系统必须和 Electron 的操作系统匹配。在 Windows 中，一个常见的错误是对64位版本的 Electron 使用 32bit 版本的 Flash 插件）

在electron的官方文档中我们可以找到设置插件的方式：

const { app, BrowserWindow } = require('electron')
const path = require('path')

// 指定 flash 路径，假定它与 main.js 放在同一目录中。
let pluginName
switch (process.platform) {
case 'win32':
pluginName = 'pepflashplayer.dll'
break
case 'darwin':
pluginName = 'PepperFlashPlayer.plugin'
break
case 'linux':
pluginName = 'libpepflashplayer.so'
break
}
app.commandLine.appendSwitch('ppapi-flash-path', path.join(__dirname, pluginName))

// 可选：指定 flash 的版本，例如 v17.0.0.169
app.commandLine.appendSwitch('ppapi-flash-version', '17.0.0.169')

app.on('ready', () => {
let win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
plugins: true
}
})
win.loadURL(`file://${__dirname}/index.html`)

})
您也可以尝试加载系统安装的 Pepper Flash 插件，而不是装运插件，其路径可以通过调用 app.getPath('pepperFlashSystemPlugin') 获取。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
这是我项目的配置：

const {resolve} = require('path');

let plugins = resolve(__dirname, '../../lib/pepflashplayer64.dll')
if (__dirname.includes(".asar")) {
plugins = require('path').join(process.resourcesPath + '/lib/pepflashplayer64.dll')
}
app.commandLine.appendSwitch('ppapi-flash-path', plugins)
1
2
3
4
5
6
7
之所以有__dirname.includes(".asar")这个判断，是因为开发环境和打包后的目录结构是不一样的。这一点大家可以在找一下打包相关的资料就知道了。

到了这里我们运行程序会发现，当我们播放一个视频的时候，仍然无法播放。此时：
如果使用的是webview：
在标签里添加 plugins 属性。

<webview src="https://www.adobe.com/software/flash/about/" plugins></webview>
1
如果使用的是BrowserWindow：

let win = new BrowserWindow({
width: 800,
height: 600,
frame: true,
autoHideMenuBar: true,
maximizable: true,
minimizable: true,
transparent: true,
'webPreferences': { // 注意一定要添加这个不然flash插件不会生效
plugins: true,
webSecurity: false
}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
plugins: true 这个配置项是必须的。这个选项会告诉electron我们要使用插件，给个方便。。

到了这里我们在本地运行项目就不会有问题了，接下来我们就要配置一下打包的相关参数了。

在pakage.json中，我们build的配置下面内容：

"build": {
"productName": "产品名称",
"appId": "产品id",
"directories": {
//输出目录
"output": "build"
},
"files": [
"dist/electron/**/*"
],
"asar": true,
"artifactName": "${productName}-${version}.${ext}",
"compression": "maximum",
"nsis": {
"allowToChangeInstallationDirectory": true,
"oneClick": false,
"menuCategory": true,
"allowElevation": false
},
"electronDownload": {
"mirror": "http://npm.taobao.org/mirrors/electron/"
},
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/icon.ico",
"target": "nsis",
//将特定的文件排除，不打包在asar包内
"extraResources": "./lib/*.dll"
},
"linux": {
"icon": "build/icons"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
其中最重要的配置就是 "extraResources": "./lib/*.dll" 这样的话我们的所有配置就算完成了，然后运行build，

yarn run build
1
打包完成后的目录如下：

其中exe就是我们的安装程序了。

我们的插件就在打包完成后的这个目录下，如果你运行安装程序，安装完成后的目录结构和win-unpacked目录结构是一致的。
---------------------
作者：秋殇阁
来源：CSDN
原文：https://blog.csdn.net/qingyulove/article/details/84582105
版权声明：本文为博主原创文章，转载请附上博文链接！