{"id":15026210,"url":"https://github.com/chimeejs/chimee","last_synced_at":"2025-10-17T23:38:33.833Z","repository":{"id":41002205,"uuid":"95839159","full_name":"Chimeejs/chimee","owner":"Chimeejs","description":"a video player framework aims to bring wonderful experience on browser","archived":false,"fork":false,"pushed_at":"2020-06-15T08:53:07.000Z","size":10768,"stargazers_count":2401,"open_issues_count":35,"forks_count":201,"subscribers_count":53,"default_branch":"master","last_synced_at":"2025-05-14T22:09:06.791Z","etag":null,"topics":["advertising-plugin","chimee","flv","framework","h5-video","h5-video-player","hls","html5","html5-video","html5-video-player","mp4","players","video","video-element","video-player","videoplayer","videoplaymanager","videoplugin","web-video-player"],"latest_commit_sha":null,"homepage":"http://chimee.pyzy.net/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Chimeejs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"toxic-johann"}},"created_at":"2017-06-30T02:22:02.000Z","updated_at":"2025-05-13T08:50:34.000Z","dependencies_parsed_at":"2022-07-13T18:20:57.031Z","dependency_job_id":null,"html_url":"https://github.com/Chimeejs/chimee","commit_stats":null,"previous_names":[],"tags_count":63,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Chimeejs%2Fchimee/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Chimeejs","download_url":"https://codeload.github.com/Chimeejs/chimee/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254235701,"owners_count":22036964,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["advertising-plugin","chimee","flv","framework","h5-video","h5-video-player","hls","html5","html5-video","html5-video-player","mp4","players","video","video-element","video-player","videoplayer","videoplaymanager","videoplugin","web-video-player"],"created_at":"2024-09-24T20:04:03.995Z","updated_at":"2025-10-17T23:38:28.809Z","avatar_url":"https://github.com/Chimeejs.png","language":"JavaScript","readme":"# Chimee\n\n[![Build Status](https://img.shields.io/travis/Chimeejs/chimee/master.svg?style=flat-square)](https://travis-ci.org/Chimeejs/chimee.svg?branch=master)\n[![Coverage Status](https://img.shields.io/coveralls/Chimeejs/chimee/master.svg?style=flat-square)](https://coveralls.io/github/Chimeejs/chimee?branch=master)\n[![npm](https://img.shields.io/npm/v/chimee.svg?colorB=brightgreen\u0026style=flat-square)](https://www.npmjs.com/package/chimee)\n[![dependency Status](https://david-dm.org/Chimeejs/chimee.svg)](https://david-dm.org/Chimeejs/chimee)\n[![devDependency Status](https://david-dm.org/Chimeejs/chimee/dev-status.svg)](https://david-dm.org/Chimeejs/chimee?type=dev)\n[![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://github.com/facebook/jest)\n[![jest](https://facebook.github.io/jest/img/jest-badge.svg)](https://github.com/facebook/jest)\n[![Code Quality: Javascript](https://img.shields.io/lgtm/grade/javascript/g/Chimeejs/chimee.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/Chimeejs/chimee/context:javascript)\n[![Total Alerts](https://img.shields.io/lgtm/alerts/g/Chimeejs/chimee.svg?logo=lgtm\u0026logoWidth=18)](https://lgtm.com/projects/g/Chimeejs/chimee/alerts) [![Greenkeeper badge](https://badges.greenkeeper.io/Chimeejs/chimee.svg)](https://greenkeeper.io/)\n\nEnglish | [中文](https://github.com/Chimeejs/chimee/blob/master/doc/zh-cn/README.md)\n\n## Introduction\n\nChimee 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.\n\nIn 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.\n\nChimee helps developer to reach complex video capabilities from scratch easier and quicker.\n\n## Features\n\nChimee is a [web video player](https://github.com/Chimeejs/chimee/blob/master/doc/zh-cn/api/chimee-api.md).\n\n1. It supports multiple video stream including mp4, m3u8, flv, and more.\n2. It solves most of the compatibility problems including cross-browser fullscreen, autoplay, and playing inline.\n\nWhat's more, it's also a [component framework](https://github.com/Chimeejs/chimee/blob/master/doc/zh-cn/design/why-chimee-is-a-frame.md) based on the video element.\n\n1. It helps us to split complex functions off into multiple plugins.\n2. Each plugin can work on the video element directly and easily.\n3. This framework sorts out the hierarchical relationship between plugins, which will keep us free from the `z-index` problem.\n4. 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.\n5. It offers us convenient ways to communicate between plugins.\n6. It allows us to define plugin priority, which has been useful in making the advertising plugin work as expected.\n7. It also supports asynchronous plugins.\n\n## Installation\n\n### npm\n\n```\nnpm install --save chimee\n```\n\n### cdn\n\nYou can get the cdn url on [https://cdnjs.com/libraries/chimee](https://cdnjs.com/libraries/chimee).\n\nIf you are in china, you can get the cdn url on [https://www.jsdelivr.com/package/npm/chimee](https://www.jsdelivr.com/package/npm/chimee).\n\n## Usage\n\nYou can use Chimee directly.\n\nAssuming you have a `div` whose id is `wrapper`:\n\n```html\n\u003cbody\u003e\n  \u003cdiv id=\"wrapper\"\u003e\n  \u003c/div\u003e\n\u003c/body\u003e\n```\n\nYou can then setup Chimee on it:\n\n```javascript\nimport Chimee from 'chimee';\nconst chimee = new Chimee('#wrapper');\nchimee.on('play', () =\u003e console.log('play!!'));\nchimee.load('http://cdn.toxicjohann.com/lostStar.mp4');\nchimee.play(); // play!!\n```\n\nSometimes we need more customization; Chimee can be called by passing in an object:\n\n```javascript\nimport Chimee from 'chimee';\nconst chimee = new Chimee({\n  wrapper: '#wrapper',\n  src: 'http://cdn.toxicjohann.com/lostStar.mp4',\n  controls: true,\n  autoplay: true,\n});\n```\n\nIf you need to play video in flv or hls, you can simply add those kernels:\n\n```javascript\nimport Chimee from 'chimee';\nimport flv from 'chimee-kernel-flv';\nimport hls from 'chimee-kernel-hls';\nconst chimee = new Chimee({\n  wrapper: '#wrapper',\n  src: 'http://cdn.toxicjohann.com/lostStar.mp4',\n  controls: true,\n  autoplay: true,\n  kernels: {\n    flv,\n    hls\n  }\n});\nchimee.play();\n```\n\nOr you can try `installKernel`, and then use it:\n\n```javascript\nimport Chimee from 'chimee';\nimport flv from 'chimee-kernel-flv';\nimport hls from 'chimee-kernel-hls';\nChimee.installKernel(flv);\nChimee.installKernel(hls);\nconst chimee = new Chimee({\n  wrapper: '#wrapper',\n  src: 'http://cdn.toxicjohann.com/lostStar.mp4',\n  controls: true,\n  autoplay: true,\n  kernels: [ 'flv', 'hls' ],\n});\nchimee.play();\n```\n\nIf you want to know more about Chimee, please read more on our API docs, [here](https://github.com/Chimeejs/chimee/blob/master/doc/zh-cn/api/chimee-api.md).\n\nHowever, if you use Chimee directly, it's best to add this style to your page:\n\n```css\ncontainer {\n  position: relative;\n  display: block;\n  width: 100%;\n  height: 100%;\n}\nvideo {\n  width: 100%;\n  height: 100%;\n  display: block;\n  background-color: #000;\n}\nvideo:focus,\nvideo:active {\n  outline: none;\n}\n```\n\nChimee will simply use the default styles of browsers if you do not use any plugins. But you may want to try our UI plugin…\n\n```javascript\nimport popup from 'chimee-plugin-popup';\nimport Chimee from 'chimee';\nChimee.install(popup);\nconst chimee = new Chimee({\n  wrapper: '#wrapper',\n  src: 'http://cdn.toxicjohann.com/lostStar.mp4',\n  plugin: [popup.name],\n  controls: false,\n  autoplay: true\n});\n```\n\nIf you want to know more about Chimee's plugins, please read more [here](https://github.com/Chimeejs/chimee/blob/master/doc/zh-cn/api/plugin-api.md).\n\nIf 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\n\n```javascript\nimport ChimeePlayer from 'chimee-player';\n\nconst chimee = new ChimeePlayer({\n  wrapper: '#wrapper',\n  src: 'http://cdn.toxicjohann.com/lostStar.mp4',\n  controls: false,\n  autoplay: true\n});\n```\n\n## FAQ\n\n\u003e TODO: more coming soon!~\n\n1. [What is Chimee?](https://github.com/Chimeejs/chimee/blob/master/doc/zh-cn/api/chimee-api.md)\n2. [What is Chimee's plugin?](https://github.com/Chimeejs/chimee/blob/master/doc/zh-cn/api/plugin-api.md)\n3. [How do I write a plugin?](https://github.com/Chimeejs/chimee/blob/master/doc/zh-cn/advanced/how-to-write-a-plugin.md)\n4. [How do I write an advertising plugin?](https://github.com/Chimeejs/chimee/blob/master/doc/zh-cn/advanced/how-to-write-an-ad-plugin.md)?\n5. [How do I write a UI plugin?](https://github.com/Chimeejs/chimee/blob/master/doc/zh-cn/advanced/how-to-write-a-ui-plugin.md)\n\n## Explanation of Different Builds\n\nYou will find four different builds in the lib.\n\n| Name             | Kind     | Meaning                                            | Define environment?      |\n| ---------------- | -------- | -------------------------------------------------- | ------------------------ |\n| index.js         | commonjs | Common javascript, mostly used in Webpack 1.       | Yes                      |\n| index.mjs        | esmodule | An es module, mostly used in Webpack 2 and rollup. | Yes                      |\n| index.browser.js | umd      | Can be used directly in browser                    | No (It's in development) |\n| index.min.js     | umd      | Can be used directly in browser                    | No (It's in production)  |\n| Index.esm.js     | esmodule | An es module, mostly used in browser es module     | No (It's in development) |\n\n## Development\n\nDevelopment/production modes are hard-coded for the UMD builds: the un-minified files are for development, and the minified files are for production.\n\nCommonJS 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.\n\nCommonJS 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.\n\n### Webpack\n\nUse Webpack’s [DefinePlugin](https://webpack.js.org/plugins/define-plugin/):\n\n```javascript\nvar webpack = require('webpack')\n\nmodule.exports = {\n  // ...\n  plugins: [\n    // ...\n    new webpack.DefinePlugin({\n      'process.env': {\n        NODE_ENV: JSON.stringify('production')\n      }\n    })\n  ]\n}\n```\n\n### Rollup\n\nUse [rollup-plugin-replace](https://github.com/rollup/rollup-plugin-replace):\n\n```javascript\nconst replace = require('rollup-plugin-replace')\n\nrollup({\n  // ...\n  plugins: [\n    replace({\n      'process.env.NODE_ENV': JSON.stringify('production')\n    })\n  ]\n}).then(...)\n```\n\n## Contribution\n\nInstall this project\n\n```\nnpm install\nnpm start\n```\n\nThen open [http://127.0.0.1:10001/demo/base/index.html](http://127.0.0.1:10001/demo/base/index.html)\n\nYou can choose another page as you want\n\n## Changelog\n\nPlease read the [release notes](https://github.com/Chimeejs/chimee/releases).\n\n## License\n\n[MIT](https://opensource.org/licenses/MIT)\n\nPlease read the [release notes](https://github.com/Chimeejs/chimee/releases).\n\n## Donation\n\nYou can donate to us through Alipay. That will keep us moving.\n\n![image](https://user-images.githubusercontent.com/2577157/74649176-0a7db980-51ba-11ea-9db4-4dea2e72c6be.png)\n","funding_links":["https://github.com/sponsors/toxic-johann"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchimeejs%2Fchimee","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchimeejs%2Fchimee","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchimeejs%2Fchimee/lists"}