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);
  }

}

[allenYetu211]

[allenYetu211]

@yandeqiang 还请帮忙看看。

[yandeqiang]

我这边在 pc 端 chrome debug 移动模式下是可以正常切视频的啊。 你测试代码是什么？ 给我看看。 我的是这个。

clarity: {
              list: [
                {name: '标清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_368b70a5d4f-c5cc-42ff-b442-004168fc86a3.mp4'},
                {name: '高清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_369ed890f51-1c38-42a7-9ce2-828492660c60.mp4'},
                {name: '超清', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_370cc2f40bd-a39f-472a-884f-f44fcd9c5ae0.mp4'},
                {name: '原画', src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/103_371ab0c0fda-143d-4755-8727-d3cd12dce02d.mp4'}
              ]
            },

你的那个报错好像是切换视频的问题。不支持的视频格式。 你断点看看。 url 是什么？

我换成 m3u8 到移动端，发现这块 silentLoad 切换视频地址一般会报这个错误

这块 silentLoad 是不是有受浏览器限制。 @toxic-johann

[allenYetu211]

这是我播放的地址，是hls的源。使用Safari是可以正常播放，是切换地址的时候没有反应，发现是进入了catch内，然后使用chrome 来调试。

pc端的chrome不支持hls的解析,所以报了这个错误。
不过我已经在配置中添加了hls的解析。但是在chrome依旧没法播放m3u8的源。

kernels: {
            hls: ChimeeKernelHls,
        }

这个地方还请帮忙解答一下。

以下是我播放的源地址：

clarity: {
    list: [
      {src: "http://securelive.ainemo.com/devnemo/ff808081658986180165899e837e0035.m3u8?auth_key=9d68658e51b1c71b204058b184b3a7b7-1537002000-41920cae9dcf4669b72fff669dbfbfa4-"
, name: "高清"},
      {src: "http://securelive.ainemo.com/devnemo/ff808081658986180165899e837e0035_2.m3u8?auth_key=5da7b00e5c7418eb4ae04bfde0b4559f-1537002000-88f4003706df4e9ba539ab81875fb78e-"
, name: "标清"}
   ]
}

切换的地方我明天使用Safari再来进行调试。

[allenYetu211]

「不过我已经在配置中添加了hls的解析。但是在chrome依旧没法播放m3u8的源。」 这里是我的问题，我未将box设置为 hls。

[allenYetu211]

@yandeqiang 自测后没有问题，重新修改了一下样式

[yandeqiang]

晚上我看下， 发包后告你。

[yandeqiang]

样式有一些问题吧。 字体颜色。 大小。 li 标签 style。 还有你改已有组件的样式了？
这块需要改动吗？

在看看样式吧。
我先回滚了， 你改了， 重新 merge 一下吧

[allenYetu211]

@yandeqiang
请问下，是否有设计规范，如果有的话，还请告诉我一下在哪里。没有的话我参照其他的内容来修改样式。

已有组件样式，我之前修改了一下。 主要是点击分辨率要出现两个li标签，但是被control给隐藏了。所以将hide去掉了。