How to Play local mp4 file in electron

Playing local MP4 files in Electron involves several key steps. First, ensure that both the main process and renderer process of Electron are correctly configured. Next, use the HTML <video> tag to load and play the video file. I will now provide a detailed explanation of this process, along with a simple example.

Step 1: Create the Electron Application

First, initialize a basic Electron application. If you already have a project, you can skip this step. Otherwise, use the following commands to create a new Electron application:

bash
# Initialize a new Node.js project
npm init -y

# Install Electron
npm install electron

Step 2: Set Up the Main Process File

In Electron, the main process is responsible for creating and managing browser windows. You can create a file named main.js in the project's root directory to set up the main process:

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

function createWindow() {
  // Create a new browser window
  let win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  });

  // Load the index.html file
  win.loadFile('index.html');
}

app.on('ready', createWindow);

Step 3: Create the HTML File and Embed the Video

Create a file named index.html in the project's root directory, using the <video> tag to embed the MP4 video:

html
<!DOCTYPE html>
<html>
<head>
    <title>Video Player</title>
</head>
<body>
    <video controls>
        <source src="path/to/your/video.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
</body>
</html>

Specify the path to the local MP4 file in the src attribute of the <source> tag.

Step 4: Run the Electron Application

Finally, add a start script to the package.json file and run your application using Electron:

json
{
  "name": "electron-video-player",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^latest_version"
  }
}

Then run the following command in the terminal:

bash
npm start

This will launch the Electron application, displaying a video player with playback controls. Users can play, pause, and adjust the video progress.

By following these steps, you can successfully play local MP4 files within an Electron application. This process primarily involves embedding the video file and basic setup of the Electron application. I hope this example helps you understand how to implement video playback functionality in your actual projects.

2024年6月29日 12:07 回复

1个答案

Step 1: Create the Electron Application

Step 2: Set Up the Main Process File

Step 3: Create the HTML File and Embed the Video

Step 4: Run the Electron Application

你的答案