码农爬坑之video load error

前阵子开始忙一个小活，时间巨紧，胖兔夜以继日地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窗口终于可以正常显示，总算从坑里爬出来了。虽然还是满脑袋问号，暂时也没空理会，继续爬下一个坑去。。。

---

小小经验，记录在案。