Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

chimee

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

chimee

a video-player aims to bring wonderful experience on browser

0.2.6
Source
npm

Version published: 7 years ago

Weekly downloads: 24; decreased by-73.03%

Maintainers: 3

Weekly downloads

Created: 7 years ago

Source

chimee

English | 中文

Introduction

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

In most situation, we need to support complex function based on video, such as barrage, advertising. It's hard to maintain them if you we just write it based on video. So we may need to have a frame to sort out the logic and handle the communication. So Chimee offer you a plugin system, so that you can splitt your complex function into multiple plugins. Through this reform of development, developers can decouple logic, to achieve gray-scale release and other functions.

Chimee help developer to achieve video scenes easier and quicker.

Feature

Chimee is a web video player

It support multiple video stream including mp4, m3u8, flv etc
It solve most of the compatibility issues including fullscreen, autoplay, inline playing etc.

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

It help us to split complex function into multiple plugins.
For each plugin, they can operate the video element directly and easily.
It will sort out the hierarchical relationship between plugins, which will keep us free from z-index problem.
It provides a variety of modules such as transparent plugin, penetrating plugin, inner plugin and outer plugins, which can cover most of the interative scenerios.
It offer us convinient ways to communicate between plugins.
It allow us to define high priority plugin, which is useful in making advertising plugin.
It also support async plugin.

Installation

npm

npm install --save chimee

cdn

TODO: will offer when we publish chimee

Usage

You can use chimee directly.

Assume you have a div whose id is wrapper.

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

Then you can 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 to custom more, we can pass in an object.

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

If you need to play video in flv or hls. You should add preset.

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,
  preset: {
    flv,
    hls
  }
});
chimee.play();

If you want to know more about chimee, please click here.

What's more, if you use chimes directly, it's better to add this style in 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 use the original skin of browser if you do not use any plugin. You may want to try our UI plugin.

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

If you want to know more about Chimee's plugin, please click here.

If you don't want to care too much. And just need a useful video player. You can install chimes-player, which contain base ui and logger.

import ChimeePlayer from 'chimee-player';

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

Documentation

coming soon~

Contribution

clone 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 realase notes.

License

MIT

Keywords

FAQs

What is chimee?

Is chimee popular?

Is chimee well maintained?

Package last updated on 08 Aug 2017

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install