Electron实现跨平台视频播放器

Posted 2023-03-23

参考技术A 最近在看英文字幕的电影，听力水平一般，有些字幕对话想多回放几遍。这个是一个比较小众的需求，发现目前的播放器都不支持。于是就想自己实现个有字幕回放功能的播放器。跨平台的开源播放器，比如VLC、MPV，开发的门槛都挺高的。如果能用Electron做播放器的话，添加一些个性的功能，应该会比较简单，写一些html、js就可以。使用Electron制作播放器碰到的最大问题是，H5 <video>标签只支持部分的视频格式。经过一段时间的研究，这个问题已经解决。目前基于Electron的跨平台全能播放器已经实现，并加上了我最想要的字幕对话回放功能。

在Electron应用里，H5 <video>标签支持视频的本地路径。
H5 <video>标签只支持部分的视频格式（mp4、webm和ogg）。需要使用 ffmpeg 支持其他格式的视频文件（mkv、rmvb、flv...）。这里可以使用 ffmpeg 的nodejs封装库 fluentffmpeg 。
先使用 ffmpeg 检查视频文件是否可以直接用H5 <video>标签直接播放。

对于H5 <video>标签不支持的格式，需要 ffmpeg 转码。
Electron应用进程分为浏览器渲染进程，和nodejs主进程。nodejs可以启动http server，这个http server使用 ffmpeg 实时转码，返回H5 <video>标签可以识别的fragmeted mp4视频流。

前端H5的video标签src属性设置为nodejs视频流的地址

H5 <video>标签有默认的拖动控制条，支持普通mp4视频流的seek，一般通过http range实现。但是对fragmented mp4视频流，http range无法实现seek。这里的fragmented mp4视频流是实时的转码流，整个视频文件的size是未知的。
这里我们去掉了H5 <video>标签的默认控制条，使用自定义的拖动控制条。通过 ffmpeg 获得视频的总时长。拖动的时候在视频流的请求地址里面提交seek time。http server获得seek time后，通过 ffmpeg 命令的seek参数将视频的播放时间移动。

播放器使用 videojs 实现UI，很不错。

https://github.com/relaxrock/rockplayer

在 Node.js / Electron 应用中播放本地 .avi 视频

【中文标题】在 Node.js / Electron 应用中播放本地 .avi 视频

【英文标题】：Play local .avi videos in Node.js / Electron app

【发布时间】：2017-08-21 15:42:45

【问题描述】：

在我正在开发的应用程序中，令人抓狂的差距是在 HTML5 视频实现中似乎很少（或根本不）支持 AVI。所以，我需要一个跨平台的解决方法，并且可以与我的电子应用程序打包。

视频在本地托管 我不反对即时编码（ffmpeg avi -> mp4 并原生使用 HTML5？） 由于 VLC 和 Electron 的变化，WebChimera 似乎正在死去（开发人员跟不上）（是否有另一个 npm 包可以做到这一点？） 调用本机 VLC 实例的包装器可能会起作用 -- 但我如何确保 VLC 在系统上与我的包装一起可用？ 我是否应该在单独的窗口中生成本机应用程序（即 Linux 上的 Totem）？ （看起来很笨重） 最新的 videoj-java 插件显然有问题 (https://github.com/Afterster/videojs-java/issues/2) 并且在电子堆栈中添加另一层 (java) 似乎有点令人讨厌。 FFBinaries (https://github.com/vot/ffbinaries-node) 看起来很有希望...但奇怪的是 FFPlay 不适用于 Linux（尽管我怀疑我的 linux 用户可能已经安装了 ffmpeg）。

注意：文件绝对是 AVI。我无法改变这一点。

非常感谢任何提示/指针！

更新

在我的系统上，使用ffmpeg进行转换：

ffmpeg -i infile.AVI -vcodec copy -acodec copy outfile.mp4

完全不需要时间（它们是短视频）：

real    0m0.138s
user    0m0.100s
sys     0m0.032s

所以我倾向于用我的程序打包 ffmpeg 并在加载之前进行转换。

【参考方案1】：

看看这个项目：

https://github.com/RIAEvangelist/electron-video-player

根据已知支持的格式：

https://github.com/RIAEvangelist/electron-video-player#known-supported-video-types

它支持：

mp4 网站 ogg mov (MPEG4 | H.264) avi (MPEG4 | H.264) mkv (MPEG4 | H.264) m4v (MPEG4 | H.264)

看看它的源代码，看看你是否可以类似地实现它。

您说您需要 AVI 支持，但 AVI 只是一个容器 - 如果您需要除此项目支持的编解码器之外的其他编解码器，那么您仍然需要先对其进行转码。

如果你不能这样做，那么你可以尝试使用类似的东西：

https://www.npmjs.com/package/mplayermanager

并将 mplayer 与您的应用或其他播放器捆绑在一起。

【讨论】：

我下载了那个程序，但它没有播放我的 AVI 视频... AVI 中嵌入的编解码器：Stream #0:0: Video: h264 (Main) (H264 / 0x34363248), yuv420p , 640x480, 2417 kb/s, 30 fps, 30 tbr, 30 tbn, 60 tbc 流 #0:1: 音频: mp2 (P[0][0][0] / 0x0050), 44100 Hz, 立体声, s16p, 64 kb/s

我查看了电子视频播放器的源代码。它仅取决于浏览器来播放视频。正如问题中所问的那样，没有特定的代码来处理像 .avi 这样的格式。

【参考方案2】：

根据this SO的回答，Electron现在支持<video>标签中的多种视频格式，包括.mkv、.avi等格式。您无需依赖外部播放器。