electron nodejs读取本地视频文件通过video打开
时间: 2023-08-02 09:06:30 浏览: 225
Electron项目:读写本地json文件,实现用户登录、修改用户信息,窗口最小化,最大化,关闭窗口
5星 · 资源好评率100%
要使用Electron和Node.js在浏览器中打开本地视频,你可以使用Node.js的`fs`模块来读取本地视频文件,然后将文件路径作为`<video>`标签的`src`属性值,最后使用Electron的`BrowserWindow`模块来创建一个包含`<video>`标签的窗口。
具体步骤如下:
1. 在你的Electron项目目录下,创建一个视频文件夹,并将你的本地视频文件放入该文件夹中。
2. 在你的JavaScript文件中,使用`fs`模块读取本地视频文件,示例代码如下:
```javascript
const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');
const fs = require('fs');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
},
});
const filePath = path.join(__dirname, '/videos/video.mp4'); // 视频文件路径
const fileExists = fs.existsSync(filePath);
if (fileExists) {
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true,
}));
mainWindow.webContents.on('did-finish-load', () => {
mainWindow.webContents.send('play-video', filePath);
});
} else {
console.error('视频文件不存在');
}
mainWindow.on('closed', () => {
mainWindow = null;
});
}
app.on('ready', createWindow);
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
app.on('activate', () => {
if (mainWindow === null) {
createWindow();
}
});
```
其中,`filePath`是你本地视频文件的路径,`fileExists`变量用于判断视频文件是否存在。
3. 在你的HTML文件中,创建一个包含`<video>`标签的页面,示例代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Video Player</title>
</head>
<body>
<video id="video-player" width="640" height="360" controls>
Your browser does not support the video tag.
</video>
<script src="./renderer.js"></script>
</body>
</html>
```
其中,`<video>`标签的`id`属性为`video-player`,`controls`属性用于显示视频控制条。
4. 在你的renderer.js文件中,使用`ipcRenderer`模块来接收主进程发送的视频文件路径,并将其作为`<video>`标签的`src`属性值,示例代码如下:
```javascript
const { ipcRenderer } = require('electron');
ipcRenderer.on('play-video', (event, filePath) => {
const videoPlayer = document.getElementById('video-player');
videoPlayer.src = `file://${filePath}`;
});
```
其中,`ipcRenderer.on('play-video', ...)`用于接收主进程发送的视频文件路径,`videoPlayer.src`用于将其作为`<video>`标签的`src`属性值。
5. 运行JavaScript文件,即可通过Electron打开包含`<video>`标签的窗口,自动播放指定的本地视频文件。
阅读全文