前阵子开始忙一个小活，时间巨紧，胖兔夜以继日地coding，爬了一个又一个巨坑。其实对码农来说，各种坑见得多了，能填则填，不能填则避。然而，总有一些坑回避不了、必须解决，咋办？找度娘，查谷歌，问大牛、询Stackflow等等，都是常见路数。可要还解决不了呢？那就恭喜了，自个儿慢慢爬，什么时候爬出来，只有天知道了。
话说这个项目是基于electron的一个桌面程序，里面一个editor窗口，其中含有html5的video控件。注意，坑要来了！在两台机器上分别运行，ffmpeg版本一样，视频编码一样，electron版本一样（内置chromium版本当然也一样），但在两台机器上运行，一台可以打开，另一台就不能打开！于是各种查错过程展开了。。。。（此处省略3000字）
根据html5 video控件的设计，视频加载过程中，依次发生loadstart、durationchange、loadedmetadata、loadeddata、progress、canplay、canplaythrough这7个事件。跟踪发现在出错的机器上，video控件在loadstart之后就出错了（别问我为什么只有一台机器错，崩溃第一次）。
这是跟踪出来的错误截图：
chronium develop tools跟踪到的错误截图
查找DEMUXER_ERROR_COULD_NOT_OPEN，以及FFmpegDemuxer: open context failed这样的错误，基本找不到有用的信息，除了Chromium “FFmpegDemuxer: open context failed” when playing audio这一篇，可它给出的建议是重新换一个chromium版本。于是我把electron的版本从1.8.7升级到2.0.6，然而，问题依旧，不出错的机器仍然不出错，出错的机器仍然出错！
爬坑到这里基本走入死胡同了。然而，意外的操作发现，出错的机器上，只要手工按一下F5，editor居然就能打开了！video控件从loadstart一直到canplaythrough都不会再出现错误（别问我为什么F5就能好，崩溃第二次）。
问题还没解决，因为electron程序一旦打包生成可执行文件，按F5就无效了！再说让用户手工按 一下F5这算什么？没办法，只能继续解决。
先在脚本里尝试重新调用video.load()，发现起不了作用，多等一段时间也不行（测试中5秒以后仍然load失败），接着在onerror事件里让整个窗口重新刷新，这下终于OK了（别问我为什么，崩溃第三次）。最后的代码片段如下：
preview.addEventListener('error', event => {
console.log('video error occured.', event.srcElement.error);
// Avoid first time video load error. Don't ask me why this fucking happening
setTimeout(() => {
window.location.reload();
}, 100);
});
Editor窗口终于可以正常显示，总算从坑里爬出来了。虽然还是满脑袋问号，暂时也没空理会，继续爬下一个坑去。。。
小小经验，记录在案。
网友评论