electron播放本地任意格式的視頻核心代碼

更新時間：2026年05月19日 08:38:29 作者：孫690342

如果你用Electron做過桌面應用,特別是需要播放本地視頻的應用,下面這篇文章主要介紹了electron播放本地任意格式的視頻的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

說明

不支持快進和顯示時間，最大流暢支持2G/小時的視頻，未使用硬件加速（技術水平不足），高清視頻轉碼太慢。 electron可以直接讀取硬盤上的文件，對于mp4視頻不需要轉碼（很不嚴謹，如需要更嚴謹，請參考別人的博客），直接將其路徑賦值給video的src屬性即可；對于非mp4視頻，則開啟http推流。

npm依賴

"dependencies": {
    "@ffmpeg-installer/ffmpeg": "1.0.20",
    "fluent-ffmpeg": "2.1.2",
    "express": "^4.17.1"
  }

核心代碼

創(chuàng)建一個獨立的video-server.js文件，在子里程中運行，開啟http服務

(function () {
    'use strict';
    const express = require('express');

    const fs = require('fs');

    const app = express();
    const ffmpegPath = require('@ffmpeg-installer/ffmpeg').path;
    const ffmpeg = require('fluent-ffmpeg');
    ffmpeg.setFfmpegPath(ffmpegPath);

    let ffmpegCommand = null;

    app.get('/video', function (req, res) {
        let pathSrc = req.query.video;
        let stat = fs.statSync(pathSrc);
        if (ffmpegCommand !== null) {
            ffmpegCommand.kill();
            ffmpegCommand = null;
        }
        ffmpegCommand = ffmpeg(pathSrc)
            .input(pathSrc)
            .nativeFramerate()
            .videoCodec('libx264')
            .audioCodec('aac')
            .format('mp4')
            .seekInput(0)
            .outputOptions(
                '-movflags', 'frag_keyframe+empty_moov+faststart',
                '-preset', 'veryfast', //以損失畫質換取流暢度
                '-g', '18')
            .on('progress', function (progress) {
                console.log('time: ' + progress.timemark);
            })
            .on('error', function (err) {
                console.log('An error occurred: ' + err.message);
            })
            .on('end', function () {
                console.log('Processing finished !');
            });
        let videoStream = ffmpegCommand.pipe();
        videoStream.pipe(res);
    });

    app.listen(6789, () => {
        console.log('localhost:6789')
    });

})();

創(chuàng)建一個獨立的server-child.js文件，開啟子里程運行video-server.js

(function () {
    'use strict';

    const path = require('path');
    const cp = require('child_process');
    cp.fork(path.join(__dirname,'/renderer/video-server.js'));
})();

使用（非核心代碼）

html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial/security#csp-meta-tag -->
    <!-- 注意下面這一行代碼 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *;connect-src *;script-src * 'unsafe-inline' 'unsafe-eval';" />
    <script src="renderer/server-child.js"></script>
</head>
<body>
<h1>Hello World!</h1>
<div><label>請選擇視頻<input id="file-video" type="file"></label></div>
<div><button id="show-video">顯示視頻</button></div>
<div><button id="stop-video">停止播放</button></div>
<video src="" width="800" height="450" loop="loop" autoplay="autoplay">
</video>
<script src="renderer/index.js"></script>
</body>
</html>

index.js文件

window.onload = function () {
    let fileVideo = this.document.querySelector('#file-video');
    let showVideo = this.document.querySelector('#show-video');
    let stopVideo = this.document.querySelector('#stop-video');
    let video = this.document.querySelector('video');
    video.addEventListener('canplay', function () {
        video.play();
    });
    showVideo.addEventListener('click', function () {
        let files = fileVideo.files;
        if (!files.length) {
            return;
        }
        let path = files[0].path.replace(/\\/g, '/');
        if (path.endsWith('.mp4')) {
            video.src = path; //mp4文件直接播放
            return;
        }
        video.src = 'http://127.0.0.1:6789/video?video=' + encodeURIComponent(files[0].path.replace(/\\/g, '/')); //非mp4文件通過http推流播放
    });
    stopVideo.addEventListener('click', function () {
        video.src = '';
    });
}