mobile Controlbar 添加 clarity ， 页面展示为undefined。

[allenYetu211]

设备： IOS | ANDROID 所有机型、 chrome | Safari 浏览器

配置信息：

const list = [
  {
    name:"高清",
    src:"http://securelive.ainemo.com/devnemo"
  },
 {
    name:"标清",
    src:"http://securelive.ainemo.com/devnemo"
 }
]

const option = {
        wrapper: '#wrapper', // video dom容器
        src,
        box: 'native' ,
        isLive: true,
        autoplay: true, // 注：flv直播中autoplay设置false无效
        controls: true,
        preload: true,
        playsInline: true,
        x5VideoPlayerFullscreen: true,
        x5VideoOrientation: 'landscape|portrait',
        xWebkitAirplay: true,
        muted: true,
        disableUA: ['Mozilla/5.0 (Linux; Android 4.4.2; HM NOTE 1TD Build/KOT49H; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/62.0.3202.97 Mobile Safari/537.36'],
        plugin: [{
          name: 'chimeeMobiControlbar',
          children: {
            play: true,
            progressBar: false,
            clarity: {
                list
            },
            screen: true
          }
        }]
    }

[allenYetu211]

现象：点击后没有任何反应

[allenYetu211]

@welefen @toxic-johann @huzunjie @332065255 @songguangyu
哪位大佬还请帮忙看看？ 移动端是否支持分辨率切换？

[yandeqiang]

src 中地址和 list 中某一个清晰度地址相同才会显示名字。

[yandeqiang]

移动端还没有支持清晰度切换

[allenYetu211]

大佬，是没法解决的是吗？之后会支持吗？如果支持大约是什么时候支持呢？

[allenYetu211]

@yandeqiang

[yandeqiang]

这块主要是见移动端调节清晰度一般都不是 pc 端那种做法。能看下你们的需求是什么样子的吗？

[allenYetu211]

类似这种， 和pc端没有太大差异。

[allenYetu211]

刚刚参照chimee-plugin-controlbar 改了一下，正在打包，一会自测一下。

[yandeqiang]

提个 pr 吧。

[allenYetu211]

好的，自测没问题再提一下。

[allenYetu211]

修改中途遇到一个问题：
寻求帮助。

点击切换分辨率的切换按钮没有响应。
出现报错。
表现：

[allenYetu211]

我修改的部分代码：
目录文件：
根据chimee-plugin-controlbar 添加了clarity.js文件

// src/createchild.js 
// 新增
 case 'clarity':
        if (childConfig.clarity) {
          children.clarity = new Clarity(plugin, childConfig.clarity);
        }
        break;

// src/clarity.js
// 新增的 clarity.js文件做出了一些修改， 将click事件替换成了tap,模板做出一点调整
import {deepAssign, isObject, addClassName, removeClassName, setStyle, $, hasClassName} from 'chimee-helper';
import Base from './base.js';

/**
 * clarity 配置
 */

const defaultOption = {
  tag: 'chimee-clarity',
  width: '2em',
  html: `
    <chimee-clarity-text></chimee-clarity-text>
    <chimee-clarity-list>
      <ul></ul>
    </chimee-clarity-list>
  `,
  defaultEvent: {
    tap: 'tap'
  },
  duration: 3,
  bias: 0,
  increment: 0,
  repeatTimes: 0,
  immediate: false,
  abort: false,
  list: []
};

export default class Clarity extends Base {
  constructor (parent, option) {
    super(parent);
    this.option = deepAssign(defaultOption, isObject(option) ? option : {});
    this.init();
  }

  init () {
    super.create();
    addClassName(this.$dom, 'chimee-flex-component');

    this.$text = $(this.$dom).find('chimee-clarity-text');
    this.$list = $(this.$dom).find('chimee-clarity-list');
    this.$listUl = this.$list.find('ul');

    // 用户自定义配置
    this.option.width && setStyle(this.$dom, 'width', this.option.width);

    const list = this.option.list;
    if(!list.length) {
      return setStyle(this.$dom, {
        display: 'none'
      });
    }
    this.initTextList(this.option.list);
  }

  initTextList (list) {
    this.$listUl.html('');
    list.forEach(item => {
      const li = $(document.createElement('li'));
      li.attr('data-url', item.src);
      li.text(item.name);
      if(item.src === this.parent.$videoConfig.src) {
        this.$text.text(item.name);
        li.addClass('active');
      }
      this.$listUl.append(li);
    });
  }

  tap (e) {
    const elem = e.target;

    if (elem.tagName === 'CHIMEE-CLARITY' ||
        elem.tagName === 'CHIMEE-CLARITY-TEXT' ) {
          const hasClass = hasClassName(this.$dom, 'open')
          if (hasClass) {
            removeClassName(this.$dom, 'open');
          } else {
            addClassName(this.$dom, 'open');
          }
    }

    if(elem.tagName === 'LI') {
      const url = elem.getAttribute('data-url') || '';
      this.switchClarity(url).then(() => {
        this.loadOption = undefined;
        Array.from(elem.parentElement.children).map(item => {
          removeClassName(item, 'active');
        });
        addClassName(e.target, 'active');
        removeClassName(this.$dom, 'open');
        this.$text.text(e.target.textContent);
      }).catch((e) => {
        console.warn(e);
      });
    }
  }

  switchClarity (url) {
    if (this.loadOption) {
      this.loadOption.abort = true;
    }
    const {duration, bias, increment, repeatTimes, immediate, abort} = this.option;
    this.loadOption = {
      duration,
      bias,
      increment,
      repeatTimes,
      immediate,
      abort
    };
    return this.parent.$silentLoad(url, this.loadOption);
  }

}