mejs对象存在players属性但显示为空、长度为0问题求助

根因说明 #

该现象由浏览器控制台的惰性求值特性导致：

• 代码执行console.log(mejs.players)时仅输出对象引用，此时mejs.players尚未完成初始化，本身为空对象，因此Object.keys计算得到的长度为0。
• 在控制台点击展开对象时，浏览器才会动态读取该对象当前的最新属性，此时MediaElement.js已经完成播放器实例注入，因此可以看到内部存在对应值。

可通过console.log(JSON.stringify(mejs.players))验证代码执行时刻的真实值，输出结果一定是空对象{}。

修复方案 #

不要直接在DOM ready回调中读取mejs.players：DOM ready仅保证页面DOM节点加载完成，不代表MediaElement.js的播放器实例已初始化完成，推荐两种实现方式：

• 方案1：在播放器初始化的success回调中读取，为最稳妥的方案

$('video').mediaelementplayer({
  success: function() {
    console.log(mejs.players);
    console.log("Length : " + Object.keys(mejs.players).length);
  }
});

• 方案2：如果无法直接修改播放器初始化逻辑，可短时间延迟后再读取

jQuery('document').ready( function($) {
  // 延迟时长可根据实际场景调整
  setTimeout(() => {
    console.log(mejs.players);
    console.log("Length : " + Object.keys(mejs.players).length);
  }, 200);
});

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