English | 中文
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.
Chimee is a web video player.
What's more, it's also a component framework based on the video element.
z-index problem.npm install --save chimee
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.
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
});
TODO: more coming soon!~
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/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.
Use Webpack’s DefinePlugin:
var webpack = require('webpack')
module.exports = {
// ...
plugins: [
// ...
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
]
}
const replace = require('rollup-plugin-replace')
rollup({
// ...
plugins: [
replace({
'process.env.NODE_ENV': JSON.stringify('production')
})
]
}).then(...)
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
Please read the release notes.
FAQs
a video-player aims to bring wonderful experience on browser
The npm package chimee receives a total of 45 weekly downloads. As such, chimee popularity was classified as not popular.
We found that chimee demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 6 open source maintainers collaborating on the project.
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.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.
Security News
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.