我尝试学习 Electron 并想播放本地视频文件。我已经遵循了我找到的所有示例,但所有示例都是 5 年以上的日期,并且不起作用。为什么没有常规工作的工作示例?
抱歉英语不好。
我尝试使用
<input type="file" id="video-input" />
并获得良好的文件路径:files[0].path
但是在<source kind="video/mp4" src={video} />
中使用时没有任何效果。
我尝试添加:
protocol.handle('media-loader', (request) => {
return net.fetch(`media-loader://${request.url.slice('media-loader://'.length)}`);
});
我找到 https://github.com/amilajack/erb-video-example 并添加来自 https://github.com/amilajack/erb-video-example/commit/0706e53795dc11b4d8a0932b3a9d6de572de6c71#diff-d9d75cc1dda9c5e912390983ac6b2 的更改63a
没有任何效果。找不到 5 岁以下的示例。
已更新
我重新启动环境并
files[0].path
使用 webPreferences.webSecurity = false
,但在 true
上并添加 media-loader://
前缀。我在自定义协议中添加控制台登录:
protocol.handle('media-loader', (request) => {
console.log(`media-loader://${request.url.slice('media-loader://'.length)}`);
return net.fetch(`media-loader://${request.url.slice('media-loader://'.length)}`);
});
并在终端常量日志中看到:
media-loader://C/Users/johnnyT/project/data/video/sample.mp4
直到关闭应用程序。
Here's a basic example to play video in electron: `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Local Video Player</title>
</head>
<body>
<video id="video-player" controls></video>
<script src="renderer.js"></script>
</body>
</html>
`
renderer.js: `const { ipcRenderer } = require('electron');
const videoPlayer = document.getElementById('video-player');
// Listen for the 'play-video' event from the main process
ipcRenderer.on('play-video', (event, filePath) => {
// Set the video source to the local file path
videoPlayer.src = filePath;
});
`
main.js : `const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');
const url = require('url');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
// Load the HTML file
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true
}));
// Open DevTools
mainWindow.webContents.openDevTools();
}
app.on('ready', createWindow);
// Listen for the 'open-file-dialog' event from the renderer process
ipcMain.on('open-file-dialog', (event) => {
// Show a dialog to select a video file
dialog.showOpenDialog(mainWindow, {
properties: ['openFile'],
filters: [
{ name: 'Videos', extensions: ['mp4', 'avi', 'mov', 'mkv'] }
]
}).then(result => {
if (!result.canceled && result.filePaths.length > 0) {
// Send the selected file path to the renderer process
mainWindow.webContents.send('play-video', result.filePaths[0]);
}
}).catch(err => {
console.log(err);
});
});
`
Trigger the file dialog:
const { ipcRenderer } = require('electron');
// Trigger the file dialog
ipcRenderer.send('open-file-dialog');