生成实例

我们直接调用new就可以生成一个 Chimee 实例。这个实例中我们需要使用者提供一个 dom 节点，我们称之为 wrapper。因此，在构造函数里我们接受三种形式的参数——string | HTMLElment | Object。

我们可以直接传入 wrapper 的选择器。

const chimee = new Chimee('#wrapper');

也可以传入一个节点。

const wrapper = document.createElement('div');
const chimee = new Chimee(wrapper);

有的时候我们需要传入更多参数配置，我们可以传入一个对象。

const chimee = new Chimee({
  wrapper: '#wrapper',
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  controls: false,
  autoplay: true
});

具体的可选参数包括：

wrapper

• 类型：string | HTMLElment
• 含义：Chimee 的容器
• 注意事项
  • 必选项

isLive

• 类型：boolean
• 含义：播放类型
• 可选：false（点播）和 true（直播）
• 默认：false

box

• 类型：string
• 含义：视频编码
• 可选：flv、native和hls
• 默认：会根据视频地址分配正确的编码方式，若无法从视频地址中获取所需的编码，则默认分配为native。

* preset ?（v0.4.0 废弃，更改为 kernels）

• 类型: Object
• 含义: 播放器核心解码器。因为体积问题，chimee 默认仅支持原生播放器，如果需要支持其余解码方式请引入相应的解码器。
• 默认: {}

import Flv from 'chimee-kernel-flv';
const player = new Chimee({
  src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv',
  preset: {
    flv: Flv
  },
  // 编解码容器
  box: 'flv', // flv hls mp4
  // dom容器
  wrapper: '#wrapper',
  // video
  autoplay: true,
  controls: true
})

* kernels

• 类型: Object
• 含义: 播放器核心解码器。因为体积问题，chimee 默认仅支持原生播放器，如果需要支持其余解码方式请引入相应的解码器。
• 默认: {}

import Flv from 'chimee-kernel-flv';
const player = new Chimee({
  src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv',
  kernels: {
    flv: Flv
  },
  // 编解码容器
  box: 'flv', // flv hls mp4
  // dom容器
  wrapper: '#wrapper',
  // video
  autoplay: true,
  controls: true
})

有的时候我们需要为 kernel 配置单独的参数。这个时候我们可以用如下方式传入参数。

import Flv from 'chimee-kernel-flv';
const player = new Chimee({
  src: 'http://yunxianchang.live.ujne7.com/vod-system-bj/TL1ce1196bce348070bfeef2116efbdea6.flv',
  kernels: {
    flv: {
      handler: Flv,
      stashSize: 1000 * 1000 * 1024,
  },
  // 编解码容器
  box: 'flv', // flv hls mp4
  // dom容器
  wrapper: '#wrapper',
  // video
  autoplay: true,
  controls: true
})

plugin

• 类型：Array<string | Object>
• 含义：要使用的插件。
• 默认：[]
  当我们安装一个插件后，我们可以直接在新建实例时传入其名称使用它，如下：

import popup from 'chimee-plugin-popup';
import Chimee from 'chimee'
Chimee.install(popup({
  name: 'ccPopup',
  title: '这是一个居中信息框',
  body: '这里是信息内容',
  offset: '50% 50%',
  width: '200px'
}));
const chimee = new Chimee({
  wrapper: '#wrapper',
  plugin: [popup.name]
});

有的时候，我们希望给插件传入一些参数，我们可以在 plugin 中传入一个对象，该对象中必须要包含一个 name 属性。

import popup from 'chimee-plugin-popup';
import Chimee from 'chimee'
Chimee.install(popup({
  name: 'ccPopup',
  title: '这是一个居中信息框',
  body: '这里是信息内容',
  offset: '50% 50%',
  width: '200px'
}));
const chimee = new Chimee({
  wrapper: '#wrapper',
  plugin: [{
    name: popup.name,
    theme: 'dark'
  }]
});

部分情况下，可能会出现插件名冲突的情况。又或者，你希望在该实例上重命名某个插件，这时候你可以利用重命名属性。

import popup from 'chimee-plugin-popup';
import Chimee from 'chimee'
Chimee.install(popup({
  name: 'ccPopup',
  title: '这是一个居中信息框',
  body: '这里是信息内容',
  offset: '50% 50%',
  width: '200px'
}));
const chimee = new Chimee({
  wrapper: '#wrapper',
  plugin: [{
    name: popup.name,
    alias: 'myui'
  }]
});

插件间具有优先级关系，在 plugin 数组中，插件的优先级由高到低排列。

优先级高的插件将在事件处理机制中优先获得事件，因此可以阻截后方插件获取事件。

要理解插件的具体用法，请阅读为什么要将 Chimee 设计成一个组件化框架？要获知插件相关的 api， 请阅读Chimee 插件 API 介绍

container (v0.5.0 后)

• 类型：Object
• 含义：和 container 相关的属性
• 默认：

{
  "width": "100%",
  "height": "100%",
  "position": "relative",
  "display": "block",
}

videoRequiredGuardedAttributes（v0.10.0 后）

• 类型：string[]
• 含义：在切换 video 的时候，我们会创建一个新的 video， 此时我们可能会丢掉 vidoe 上除 video 属性外的部分属性，所以，为了保留这些属性，你需要将属性名称提供给我们。
• 默认：[style]

noDefaultContextMenu（v0.10.1 后）

• 类型：boolean|'container'|'wrapper'
• 含义：配置该属性可以隐藏原生右键菜单。配置true 的话会隐藏 video 上的原生菜单，配置 container 和 wrapper 则隐藏对应层级上的菜单。

video属性

除了以上几个用于 Chimee 内部使用的配置，我们还可以传入一些 video 元素需要用到的参数。

注意1）autoplay 属性在并不是在所有情况下都会生效。但是通过一些配置，我们可以使其在大部分模式下生效。- 在 iOS 下需要 inline 的模式下才能自动播放，因此在传入的时候需要设置 playsInline: true。我们会为你设置playsinline="true" webkit-playsinline="true"- 然而并不是所有 iOS 的 webview 都支持该模式，如果你的 iOS 版本比较旧，请检查 webView 上有否设置 webview.allowsInlineMediaPlayback = YES;- 在腾讯的 X5 浏览器也需要同理，设为 inline: true，我们会为你设置 x5-playsinline- 部分浏览器必须要一开始就添加 video 元素，此时，请将 wrapper 的 html 写成如下格式。

<div id="wrapper">
  <container>
    <video></video>
  </container>
</div>

2）以上所有属性均可以在 chimee 实例上直接自上使用，如this.src。