标签： 笔记

贵司官网需要放视频，于是需要用播放器。然后就产生如下需求：

1. 协议好，支持免费商用，最好 MIT
2. 支持 SRT 字幕
3. 支持尽可能多的平台

经过筛选，最后选定 MediaElement，一看 WordPress 在用基本就放心了。然后就开始踩坑之旅。当然，有些是我的问题，不过也有不少是文档没说清楚。这里记录一下。

全屏和弹性宽度

当前版本 4.2.5 有个 Bug，如果设置宽度为 100%，那么从全屏恢复到内嵌状态时，会留着全屏的宽度，撑开页面。如果设定一个特定的宽度就不会。但我们的页面是响应式的，需要允许它随页面变化而变化。

这个时候只好手工来做，我的选择是让它 100%，然后侦听从全屏返回的事件，发生后就把宽度恢复。另外，因为 fullscreenchange 事件还没有统一标准，所以不同浏览器里的事件名称也不一样，更不爽的是，IE 下是驼峰，其它浏览器是全小写，我也懒得再写函数转化了，反正就3种情况，全写一遍好了。

// fix MediaElement's issue
  let fitVideo = function() {
    setTimeout(() => {
    $('.mejs__container').width('100%')
      .find('video').width('100%')
      .end().find('.mejs__layers')
      .children().width('100%');
  }, 50);
};
if ('onwebkitfullscreenchange' in document) {
  document.onwebkitfullscreenchange = function() {
    if (!document.webkitFullscreenElement) {
       fitVideo();
    }
  };
} else if ('onmozfullscreenchange' in document) {
  document.onmozfullscreenchange = function() {
    if (!document.mozFullScreenElement) {
      fitVideo();
    }
  };
} else if ('MSFullscreenChange' in document) {
  document.MSFullscreenChange = function() {
    if (!document.msFullscreenElement) {
      fitVideo();
    }
  };
}

默认字幕

Web 标准是有默认字幕的，<track defualt> 即可。但是 MediaElement 没有，最后在 StackOverflow 上找到答案，原来有个未记录在文档里的初始化属性可以控制：

let player = new MediaElementPlayer('intro-video', {
  startLanguage: 'cn', // 这里的名字应该和 <track> 种的 srclang 属性一致
});

插件与生态

MediaElement 把一些有用但不太常用的功能抽出来做成了插件，放在 MediaElement Plugins。不过看起来这个项目有些属于维护，使用的时候很多问题。比如，直接在 features 里开启特定功能，即使对应的插件没有加载，也不会报错，就是没反应，很令人迷茫。

避免发起又取消请求

网站上线后，老板发现一个问题：从 Chrome 的 Network 面板可以看到，网页打开后，对视频文件发起了一到多个不等的请求，并且都取消了。

经过研究，我认为这个请求是 <video> 发起的，因为 preload 的默认值是 auto（参见：MDN），也即打开页面就预加载。而此时 MediaElement 被初始化，为了正确显示 UI，它会把 <video> 标签挪到自己创建的 <div> 里，这个过程就会导致“预加载 -> 取消”。因为视频默认不播放，所以我给 <video> 加上了 preload="none"，问题解决。

其它大体上文档都能找到，就不多说了。