如何在Electron中播放本地视频文件

问题描述 投票:0回答:1

我尝试学习 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

直到关闭应用程序。

javascript video electron
1个回答
0
投票
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');
© www.soinside.com 2019 - 2024. All rights reserved.