Electron 18.0.4中部分同扩展名视频播放白屏，疑与HEVC编码有关

问题详情 #

在Electron 18.0.4环境下，使用<video>标签加载视频时出现以下异常：

• 部分同扩展名视频文件加载后显示白屏无法播放，但仅修改扩展名（如mov转为mp4）即可正常播放
• 怀疑该问题与HEVC编码相关
• 已尝试添加Content-Security-Policy允许所有媒体源，且视频链接在Chrome浏览器中可正常播放

相关代码：

<video controls autoPlay width="100%" height="100%">
 <source src={videoUrl} />
</video>

白屏现象截图：

解决方案 #

1. 显式指定视频编码类型 #

在<source>标签中明确声明MIME类型和编码格式，帮助Electron内核正确匹配解码器，避免仅通过扩展名识别导致的错误：

<!-- 针对HEVC编码的mov文件 -->
<video controls autoPlay width="100%" height="100%">
  <source src={videoUrl} type='video/quicktime; codecs="hvc1"' />
</video>

<!-- 针对HEVC编码的mp4文件 -->
<video controls autoPlay width="100%" height="100%">
  <source src={videoUrl} type='video/mp4; codecs="hvc1"' />
</video>

2. 启用Electron的HEVC解码器特性 #

启动Electron应用时添加命令行参数，强制启用HEVC相关解码特性（适用于Windows/Linux，macOS依赖系统原生解码器通常无需此操作）：

your-electron-app.exe --enable-features=HEVCVideoDecoder

3. 转码为兼容性更广的编码格式 #

仅修改扩展名只是临时绕过识别问题，本质HEVC编码的兼容性仍受Electron版本和系统限制。建议直接将视频转码为H.264编码的MP4，这是跨平台支持最广泛的格式，可使用FFmpeg完成转码：

ffmpeg -i input.mov -c:v libx264 -crf 23 -c:a aac output.mp4

4. 升级Electron版本 #

Electron 18基于Chromium 100，对HEVC的支持存在局限性。升级到Electron 20及以上的稳定版本，后续版本对媒体解码的兼容性和稳定性有明显优化。

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