chimee-plugin-mobile-controlbar

install

安装

# 依赖于 chimee, 首先需要安装 chimee
npm install chimee
# 安装控制条组件
npm install chimee-plugin-mobile-controlbar

使用

import chimee from 'chimee';
import chimeePluginMobileControlbar from 'chimee-plugin-mobile-controlbar';

// 安装插件
chimee.install(chimeePluginMobileControlbar);
const player = new chimee({
  // ...
  // 使用插件
  plugin: [
    chimeePluginMobileControlbar.name // 或者 'chimeeMobiControlbar'
  ]
});

也可以在页面中引用 /lib/index.browser.js 然后在页面中使用 chimeePluginMobileControlbar

配置

一个配置 🌰 更详细的配置例子, 可以参考 /demo/index.html

plugin: [{
  name: chimeePluginControlbar.name,
  majorColor: '',
  hoverColor: '',
  children: {

  }
}]

具体的参数配置

name

majorColor

hoverColor

children

目前支持的组件及配置
组件相关问题

兼容性

兼容性是移动端的大坑,在各个浏览器内总有特殊的表现,遇到最多的情况是,浏览器控制了 video,强制使用他的播放器,并且有最高层级,结尾的时候还会有广告😂

我们这里总结了一些可操作方案,供大家选择,来避免踩这些移动端的坑

  1. uc 浏览器
    • 当前效果:强制横屏,并且使用他的播放器
    • 解决方案:貌似加联系 uc 加白名单可以解决
  2. 微信
    • 当前效果:
      • ios 目前测试的几款手机可以使用 iphone 6s /iphone 5s
      • 安卓 手机未安卓 qq 浏览器时,比较正常,手机上有 qq 浏览器时,还是 qq 浏览器的默认播放器
    • 解决方案:
      • 安卓手机下, 配置 x5VideoOrientation: 'landscape' 直接横屏播放,不会调用 qq 浏览器的播放器
      • 如果用户需要竖屏播放的话, 目前有一个 hack 方案,参见 问题列表
  3. 手机自带浏览器

最后

欢迎各位大佬使用。有什么问题/建议,随时提。