Electron应用视频进入全屏模式时显示空白页面

问题描述 #

基于Electron开发的视频播放器，通过HTML5 <video>标签实现播放功能，点击视频自带的全屏按钮后，页面变为空白状态。

问题截图：

当前package.json配置：

{
  "name": "xxxx",
  "version": "1.4.4",
  "description": " xxxx application",
  "main": "index.js",
  "scripts": {
    "electron:start": "electron ./",
    "rebuild": "electron-rebuild -f -w sqlite3"
  },
  "win": {
    "iconUrl": "icon.ico"
  },
  "dependencies": {
    "@capacitor/electron": "^1.2.0",
    "big-json": "^3.0.0",
    "electron-is-dev": "^0.3.0",
    "electron-log": "^3.0.8",
    "electron-unhandled": "^3.0.0",
    "graceful-fs": "^4.2.9",
    "knex": "^0.19.4",
    "parse-json": "^5.0.0",
    "request": "^2.88.0",
    "request-progress": "^3.0.0",
    "sqlite3": "^4.1.0",
    "yieldable-json": "^1.1.0"
  },
  "devDependencies": {
    "electron": "^5.0.4",
    "electron-prebuilt": "^1.4.13"
  },
  "keywords": [
    "electron"
  ],
   "license": "ISC"
}

解决办法 #

1. 配置窗口webPreferences权限 #

创建BrowserWindow时，确保开启必要的权限，避免视频资源加载或全屏权限被限制：

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

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true,
      webSecurity: false, // 加载本地视频资源时需关闭
      allowRunningInsecureContent: true
    }
  });

  mainWindow.loadFile('index.html');
}

app.whenReady().then(createWindow);

2. 替换原生全屏为Electron窗口全屏 #

HTML5原生全屏API在旧版Electron中易出现冲突，可拦截视频全屏事件，改用Electron窗口的全屏方法：
在渲染进程的脚本中添加：

const video = document.querySelector('video');

// 拦截原生全屏事件
video.addEventListener('webkitfullscreenchange', (e) => {
  e.preventDefault();
  const { BrowserWindow } = require('electron').remote;
  const currentWin = BrowserWindow.getFocusedWindow();
  currentWin.setFullScreen(!currentWin.isFullScreen());
});

// 或直接重写视频的全屏请求方法
video.webkitRequestFullscreen = () => {
  const { BrowserWindow } = require('electron').remote;
  BrowserWindow.getFocusedWindow().setFullScreen(true);
};

3. 升级Electron版本 #

当前使用的Electron 5.0.4版本较旧，存在大量已知兼容性问题。建议升级到最新稳定版：

# 卸载旧依赖
npm uninstall electron electron-prebuilt --save-dev
# 安装最新稳定版
npm install electron --save-dev
# 重新构建第三方依赖（如sqlite3）
npm run rebuild

4. 检查视频元素CSS样式 #

确保全屏状态下视频元素的样式正确，避免被隐藏或错位：

video {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持视频比例，避免拉伸 */
  position: relative;
  z-index: 1;
}

/* 适配原生全屏状态 */
video:fullscreen {
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

内容的提问来源于stack exchange，提问作者Farabi Abdelwahed