JWPlayer 播放器配置中 sources 数组不可变性问题解析

问题现象

在使用 JWPlayer 播放器时，当开发者尝试通过 playlist 配置项传入包含多个视频源的数组时，可能会遇到错误提示："Cannot add property default, object is not extensible"。这个错误通常发生在使用如下配置方式时：

jwplayer.setup({
  playlist: [{
    sources: [
      { file: 'myFile1' },
      { file: 'myFile2' },
    ],
  }],
});

而如果改为直接使用单个 file 配置项，则不会出现此问题：

jwplayer.setup({
  playlist: [{
    file: 'myFile1',
  }],
});

问题根源

这个问题的根本原因在于 JWPlayer 内部实现中对 sources 数组的处理方式。在 JWPlayer 的源码中，当处理播放列表项时，会尝试为 sources 数组添加一个 default 属性（用于标记默认播放源）。如果传入的 sources 数组是不可扩展的对象（例如被 Object.freeze() 处理过或被某些状态管理库如 Redux 或 MobX 代理过的不可变数据），就会抛出上述错误。

技术背景

在 JavaScript 中，对象有一个内部属性 [[Extensible]]，它决定了是否可以向对象添加新属性。当使用 Object.freeze()、Object.seal() 或某些状态管理库时，对象的 [[Extensible]] 属性会被设置为 false，此时尝试添加新属性就会抛出 TypeError。

解决方案

解决这个问题的方法很简单：确保传入 JWPlayer 的 sources 数组是可扩展的普通数组。具体可以采取以下方法：

1. 直接创建新数组：

   const playlist = [{
     sources: [
       { file: 'myFile1' },
       { file: 'myFile2' },
     ].slice() // 创建新数组
   }];
   jwplayer.setup({ playlist });
   

2. 使用展开运算符：

   const immutableSources = [
     { file: 'myFile1' },
     { file: 'myFile2' },
   ];
   const playlist = [{
     sources: [...immutableSources] // 创建新数组
   }];
   jwplayer.setup({ playlist });
   

3. 使用 Array.from()：

   const playlist = [{
     sources: Array.from(immutableSources) // 创建新数组
   }];
   jwplayer.setup({ playlist });
   

最佳实践

为了避免这类问题，建议在将配置传递给 JWPlayer 前，总是对可能被冻结或代理的数据进行浅拷贝。特别是在使用状态管理库（如 Redux、MobX）或函数式编程时更应注意这一点。

同时，这也提醒我们在设计库或框架时，如果要修改传入的参数对象，应该在文档中明确说明，或者内部先创建参数的副本再进行修改，以避免类似的兼容性问题。

总结

JWPlayer 播放器在处理多源播放列表时，需要确保 sources 数组是可扩展的。当遇到 "Cannot add property default, object is not extensible" 错误时，开发者应该检查传入的 sources 数组是否被冻结或代理，并通过创建新数组的方式解决这个问题。理解 JavaScript 对象的可扩展性概念对于解决这类框架集成问题非常有帮助。