a video player framework aims to bring wonderful experience on browser
toxic-johann Merge pull request #146 from xcorail/master
Add LGTM code quality badges
Latest commit 8e09890 Sep 7, 2018
Permalink
Failed to load latest commit information.
.github chore(issue): provide an issue template May 30, 2018
__mocks__ [update] use eslint-config-egg as default eslint extend Nov 11, 2017
__tests__ test: finish unit test on picture-in-picture function Aug 26, 2018
build build: 0.10.6 Aug 12, 2018
bundle-size build: 0.11.0 Aug 26, 2018
demo feat: add picture-in-picture mode logic Aug 12, 2018
doc docs: remove an extra space Aug 26, 2018
flow feat: support noDefaultContextMenu Jun 9, 2018
lib build: 0.11.0 Aug 26, 2018
src test: finish unit test on picture-in-picture function Aug 26, 2018
tests test: add test for noDefaultContextMenu Jun 9, 2018
tool [update] use eslint-config-egg as default eslint extend Nov 11, 2017
.babelrc test: add picture-in-picture unit test Aug 12, 2018
.eslintignore [update] use eslint-config-egg as default eslint extend Nov 11, 2017
.eslintrc [update] update to the newest chimee-kernel Dec 17, 2017
.flowconfig [update] update some package and modify relate config Jan 2, 2018
.gitignore feat(silentload): when use immediate mode in silentload, we should se… May 16, 2018
.npmignore build: 0.10.0-alpha.8 May 16, 2018
.npmrc [update] upgrade es-fullscreen Jan 2, 2018
.travis.yml [update] update package and update travis node version Feb 23, 2018
LICENSE Initial commit Jun 30, 2017
README.md Add LGTM.com code quality badges Sep 6, 2018
env-check.js [update] add env-check Jan 2, 2018
karma.conf.js test: add test for noDefaultContextMenu Jun 9, 2018
package.json build: 0.11.0 Aug 26, 2018

README.md

Chimee

Build Status Coverage Status npm dependency Status devDependency Status tested with jest jest Code Quality: Javascript Total Alerts

English | 中文

Introduction

Chimee is a web video player created by the Qiwoo Team. It's based on the web video element. It supports multiple media streams, including mp4, m3u8, flv, etc.

In most situations, we need to support complex functions based on video, such as many videos or advertising. It's hard to maintain them if you we just write it based on the video element. So we may need to have an iframe to sort out the logic and handle the communication. So Chimee offers a plugin system, so that anyone can split your complex functions into multiple plugins. Through this method of development, developers can decouple logic to achieve a quicker, gray-scale release and implement many other functions with relative ease.

Chimee helps developer to reach complex video capabilities from scratch easier and quicker.

Features

Chimee is a web video player.

  1. It supports multiple video stream including mp4, m3u8, flv, and more.
  2. It solves most of the compatibility problems including cross-browser fullscreen, autoplay, and playing inline.

What's more, it's also a component framework based on the video element.

  1. It helps us to split complex functions off into multiple plugins.
  2. Each plugin can work on the video element directly and easily.
  3. This framework sorts out the hierarchical relationship between plugins, which will keep us free from the z-index problem.
  4. It provides a variety of modules such as a transparent plugin, a penetrating plugin, an inner plugin, and an outer plugin, which will cover most of the interactive scenarios.
  5. It offers us convenient ways to communicate between plugins.
  6. It allows us to define plugin priority, which has been useful in making the advertising plugin work as expected.
  7. It also supports asynchronous plugins.

Installation

npm

npm install --save chimee

cdn

You can get the cdn url on https://cdnjs.com/libraries/chimee.

If you are in china, you can get the cdn url on https://www.jsdelivr.com/package/npm/chimee.

Usage

You can use Chimee directly.

Assuming you have a div whose id is wrapper:

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

You can then setup Chimee on it:

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!!

Sometimes we need more customization; Chimee can be called by passing in an object:

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

If you need to play video in flv or hls, you can simply add those kernels:

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

Or you can try installKernel, and then use it:

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

If you want to know more about Chimee, please read more on our API docs, here.

However, if you use Chimee directly, it's best to add this style to your page:

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 will simply use the default styles of browsers if you do not use any plugins. But you may want to try our UI plugin…

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

If you want to know more about Chimee's plugins, please read more here.

If you don't want more capabilities, and just need a useful video player, you can install chimee-player, which contains the base ui and a loggerL

import ChimeePlayer from 'chimee-player';

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

FAQ

TODO: more coming soon!~

  1. What is Chimee?
  2. What is Chimee's plugin?
  3. How do I write a plugin?
  4. How do I write an advertising plugin??
  5. How do I write a UI plugin?

Explanation of Different Builds

You will find four different builds in the lib.

Name Kind Meaning Define environment?
index.js commonjs Common javascript, mostly used in Webpack 1. Yes
index.mjs esmodule An es module, mostly used in Webpack 2 and rollup. Yes
index.browser.js umd Can be used directly in browser No (It's in development)
index.min.js umd Can be used directly in browser No (It's in production)
Index.esm.js esmodule An es module, mostly used in browser es module No (It's in development)

Development

Development/production modes are hard-coded for the UMD builds: the un-minified files are for development, and the minified files are for production.

CommonJS and ES Module builds are intended for bundlers, therefore we don’t provide minified versions for them. Developers are be responsible for minifying the final bundle themselves.

CommonJS and ES Module builds also preserve raw checks for process.env.NODE_ENV to determine the mode they should run in. Developers should use appropriate bundler configurations to replace these environment variables in order to control which mode Vue will run in. Replacing process.env.NODE_ENV with string literals also allows minifiers like UglifyJS to completely drop the development-only code blocks, agressively reducing final file size.

Webpack

Use Webpack’s DefinePlugin:

var webpack = require('webpack')

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

Rollup

Use rollup-plugin-replace:

const replace = require('rollup-plugin-replace')

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

Contribution

Install this project

npm install
npm start

Then open http://127.0.0.1:10001/demo/base/index.html

You can choose another page as you want

Changelog

Please read the release notes.

License

MIT