代码拉取完成，页面将自动刷新
English | 中文
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.
Chimee is a web video player
What's more, it's also a component framework based on video element.
z-index problem.npm install --save chimee
TODO: will offer when we publish chimee
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
});
coming soon~
You will find four differnet build in the lib.
| Name | Kind | Meaning | Need to define environment |
|---|---|---|---|
| index.js | commonjs | Common js, mostly used in Webpack 1. | Yes |
| index.mjs | esmodule | in es module, mostly used in webpack 2 and rollup | Yes |
| index.browser.js | umd | Can be used in browser directly | No(It's in development) |
| index.min.js | umd | Can be used in browser directly | No(It's in production) |
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. You will be responsible for minifying the final bundle yourself.
CommonJS and ES Module builds also preserve raw checks for process.env.NODE_ENV to determine the mode they should run in. You 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, 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(...)
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
Please read the realase notes.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型
