Github

chimee

Build Status Coverage Status npm dependency Status devDependency Status tested with jest jest

English | 中文

简介

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

特点

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

  1. 它让我们可以播放 mp4、m3u8、flv 等多种格式的视频流。
  2. 它帮我们解决大部分的兼容性问题，能够解决包括全屏、自动播放、内联播放等常见视频需求。

其次，Chimee 是一个基于 video 设计的组件化框架。

  1. 它容许我们使用插件分割业务上与视频相关的功能。
  2. 对于每个组件来说，它们的编写都相当于直接操作 video 元素，简便快捷。
  3. 它会梳理好插件间的层级关系，让我们免于被 z-index 困扰。
  4. 它提供了如透明插件、穿透插件、内外层插件等多种模式，能够覆盖多种交互情景。
  5. 它提供了多种便利的方式让我们进行组件间的沟通。
  6. 它允许我们定义高优先级插件，从而让我们轻松完成业务上的广告需求。
  7. 它支持异步组件。

安装

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

文档

文档分为以下若干部分：

指南

  1. Chimee 的播放器特性介绍
  2. 插件的使用方法
  3. Chimee 的展示结构介绍
  4. Chimee 事件机制简介——编写中
  5. Chimee 数据监控简介——编写中
  6. Chimee 相关设置介绍——编写中

设计理念

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

进阶

  1. 如何编写一个插件
  2. 如何编写一个 UI 插件

API

  1. Chimee API 介绍
  2. 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(...)

Browserify

贡献

克隆本项目

npm install
npm start

然后打开如下网页 http://127.0.0.1:10001/demo/base/index.html

你可以选择其他你想要的 demo

更新日志

请点击更新日志。

证书

MIT