chimee

简介

Chimee 由奇舞团研制的 h5 播放器，它支持 mp4、m3u8、flv 等多种格式。通过插件式开发，能满足业务方快速迭代、灰度发布等要求。让开发者能够轻松快捷地完成视频场景的开发。

特点

Chimee 首先是一个视频播放器。

它让我们可以播放 mp4、m3u8、flv 等多种格式的视频流。
它帮我们解决大部分的兼容性问题，能够解决包括全屏、自动播放、内联播放等常见视频需求。其次，Chimee 是一个基于 video 设计的组件化框架。
它容许我们使用插件分割业务上与视频相关的功能。
对于每个组件来说，它们的编写都相当于直接操作 video 元素，简便快捷。
它会梳理好插件间的层级关系，让我们免于被 z-index 困扰。
它提供了如透明插件、穿透插件、内外层插件等多种模式，能够覆盖多种交互情景。
它提供了多种便利的方式让我们进行组件间的沟通。
它允许我们定义高优先级插件，从而让我们轻松完成业务上的广告需求。
它支持异步组件。

安装

npm

npm install --save chimee

cdn

你可以前往 https://cdnjs.com/libraries/chimee 获取各个版本的 cdn 地址。

如果你在国内，你可以使用 https://www.jsdelivr.com/package/npm/chimee 获取。

用法

你可以直接使用 chimee。

假设你的页面中有一 id 为 wrapper 的 div。

<body>
  <div id="wrapper">
  </div>
</body>

那么你可以直接在其上建立 chimee 实例。

import Chimee from 'chimee';
const chimee = new Chimee('#wrapper');
chimee.on('play', () => console.log('play!!'));
chimee.load('http://cdn.toxicjohann.com/lostStar.mp4');
chimee.play(); // play!!

有的时候我们可能需要进行一些定制，你可以传入相应参数。

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

如果需要播放 flv 或者 hls 格式，请传入解码器，具体参数请查阅此处。

import Chimee from 'chimee';
import flv from 'chimee-kernel-flv';
import hls from 'chimee-kernel-hls';
const chimee = new Chimee({
  wrapper: '#wrapper',
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  controls: true,
  autoplay: true,
  kernels: {
    flv,
    hls
  }
});
chimee.play();

如果你想了解更多，请点击此处。

如果你直接使用 chimee 的话，最好添加以下样式。

container {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
video {
  width: 100%;
  height: 100%;
  display: block;
  background-color: #000;
}
video:focus,
video:active {
  outline: none;
}

在没有配置任何皮肤插件的时候，chimee 会使用浏览器原生的皮肤。你可以尝试使用我们的皮肤插件。

import popup from 'chimee-plugin-popup';
import Chimee from 'chimee';
Chimee.install();
const chimee = new Chimee({
  wrapper: '#wrapper',
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  plugin: [popup.name],
  controls: false,
  autoplay: true
});

如果你想了解更多关于 chimee 插件的知识，请点击此处。

可能你并不是太关心 chimee 是怎么运行的，你只是需要一个封装好的播放器。那么你可以直接下载 chimee-player。里面已经有基础 ui 和需要用的插件。

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

如果你使用的是移动端，那么请使用为移动端设计的 chimee-mobile-player。里面有移动端常用的基础 ui 与插件。

import ChimeeMobilePlayer from 'chimee-mobile-player';
const player = new ChimeeMobilePlayer({
  wrapper: '#wrapper',  // video dom容器
  src: 'http://cdn.toxicjohann.com/lostStar.mp4',
  autoplay: true,
  controls: true,
  playsInline: true,
  preload: true,
  x5VideoPlayerFullscreen: true,
  x5VideoOrientation: true,
  xWebkitAirplay: true,
  muted: true
});

文档

文档分为以下若干部分：

指南

设计理念

为什么要将 Chimee 设计成一个组件化框架？

进阶

API

不同的构建版本

你会发现我们有四种构建的版本。

名称	种类	用处	是否需要定义环境
index.js	commonjs	Common js, 常用于 Webpack 1.	是
index.mjs	esmodule	in es module, 常用于 webpack 2 和 rollup	是
index.browser.js	umd	常直接用于浏览器	否，构建为 development 环境
index.min.js	umd	常直接用于浏览器	否，构建为 production 环境
index.esm.js	esmodule	用于浏览器使用 module 的模式引入	否，构建为 development 环境

Development vs. Production

开发环境/生产环境模式是硬编码的 UMD 构建：开发环境下不压缩代码，生产环境下压缩代码。

CommonJS 和 ES Module 构建是用于打包工具的，因此我们不提供压缩后的版本。你有必要在打最终包的时候压缩它们。

CommonJS 和 ES Module 构建同时保留里原始的 process.env.NODE_ENV 检测，以决定它们应该运行在什么模式下。你应该使用适当的打包工具配置来替换它们的环境变量以便控制 Vue 所运行的模式。把 process.env.NODE_ENV 替换为字符串字面量同样可以让 UglifyJS 之类的压缩工具完全丢掉仅供开发环境的代码段，减少最终的文件尺寸。

Webpack

使用 Webpack 的 DefinePlugin:

var webpack = require('webpack')
module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: JSON.stringify('production')
      }
    })
  ]
}

Rollup

使用 rollup-plugin-replace:

const replace = require('rollup-plugin-replace')
rollup({
  // ...
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production')
    })
  ]
}).then(...)