H5自定义错误UI

默认UI

Aliplayer默认的错误UI如下图所示。错误UI开启

在Aliplayer2.1.0版本以后，如果用户自定义了skinLayout属性，则需要把displayError UI组件添加到skinLayout属性中，代码如下所示。更多skinLayout属性信息，请参见skinLayout属性的配置。

skinLayout:[
    ......
    {name: "errorDisplay", align: "tlabs", x: 0, y: 0},
    {name: "infoDisplay", align: "cc"},
    ......
  ]

自定义UI

您可以通过以下两种方式自定义错误UI。

• 通过CSS自定义皮肤

  保留播放器原有的布局和显示，通过重写CSS自定义皮肤，从而修改背景颜色、是否显示、字体、位置等。

  相关联的CSS如下表所示。

  Class名称	说明
  .prism-ErrorMessage	最外层容器的Class。
  .prism-error-content	错误消息显示区域。
  .prism-error-operation	处理动作显示区域。
  .prism-detect-info	其它信息显示区域。比如uuid、requestId等，主要是用于错误诊断。

• 重写UI

重写UI需要订阅错误事件，代码如下所示。

player.on('error',function(e){
      //隐藏
      $('.prism-ErrorMessage').hide();
      //解析
      var errorData = e.paramData;
      console.dir(errorData);
    });

重写UI流程如下所示：

1. 隐藏：需要订阅错误事件，如上述代码所示，隐藏Aliplayer原本的错误UI。

2. 解析：需要订阅错误事件，如上述代码所示，解析paramData里面的错误。错误事件参数包含的错误字段，如下图所示。

3. 在完成上述两个步骤之后，得到具体的错误码，可以自定义赋值给UI控件。