diff --git a/README-CN.md b/README-CN.md index e69de29bb..159410ed5 100644 --- a/README-CN.md +++ b/README-CN.md @@ -0,0 +1,125 @@ +# ArtPlayer.js + +> :art: ArtPlayer.js 是一个现代全功能的 HTML5 视频播放器 + +[![Build Status](https://www.travis-ci.org/zhw2590582/ArtPlayer.svg?branch=master)](https://www.travis-ci.org/zhw2590582/ArtPlayer) +![version](https://badgen.net/npm/v/artplayer) +![license](https://badgen.net/npm/license/artplayer) +![size](https://badgen.net/bundlephobia/minzip/artplayer) +[![npm Downloads](https://img.shields.io/npm/dt/artplayer.svg)](https://www.npmjs.com/package/artplayer) +[![Codacy Badge](https://api.codacy.com/project/badge/Grade/354e9953b70a4791a5a46194d587c707)](https://www.codacy.com/app/zhw2590582/ArtPlayer?utm_source=github.com&utm_medium=referral&utm_content=zhw2590582/ArtPlayer&utm_campaign=Badge_Grade) +[![dependencies Status](https://david-dm.org/zhw2590582/artplayer/status.svg)](https://david-dm.org/zhw2590582/artplayer) + +![Screenshot](./images/screenshot.png) + +## Features + +- 大小 - `artplayer.js` ≈ `90kb` and `artplayer.css` ≈ `20kb` +- 字幕 - 支持 `.VTT`, `.ASS` 和 `.SRT` 格式 +- 自定义 - `右键菜单`, `业务图层`, `视频控制器` 和 `设置面板` +- 控制器 - `画质切换`, `字幕切换`, `播放速度`, `长宽比`, `视频翻转`, `全屏`, `画中画`, `截图`, `缩略图`, `自适应尺寸`, `高亮` 和 `热键`... +- 内建 - `自动画中画`, `打开本地字幕`, `打开本地`, `迷你进度条`, `网络监测` 和 `字幕时间偏移` +- 集成 - 容易与其它依赖集成：`flv.js`, `hls.js`, `dash.js`, `shaka-player`, `webtorrent`... +- 代码 - 纯 `ES6` 和 `SASS`, 高解耦的代码, 清晰的结构, 容易跟踪 `Bug` 和添加新功能 +- 文档 - 详尽的接口文档和丰富的代码演示 +- 接口 - 丰富的接口和响应事件, 容易对接到业务或者自定义插件 +- 多语言 - 支持控件的国际化 + +## 生态 + +| 项目 | 描述 | 演示 | +| --------------------------------------------------------------------------------------------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | +| [artplayer-plugin-danmuku](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmuku) | 弹幕库插件 | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku) | +| [artplayer-plugin-gif](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-gif) | GIF 生成插件 | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-gif.js&example=gif) | +| [artplayer-plugin-backlight](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-backlight) | 背光插件 | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-backlight.js&example=backlight) | +| [artplayer-plugin-playlist](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-playlist) | 播放列表插件 | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-playlist.js%0A.%2Funcompiled%2Fartplayer-plugin-playlist.css&example=playlist) | +| [artplayer-tool-thumbnail](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-thumbnail) | 缩略图生成工具 | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-thumbnail.js&example=thumbnail) | +| [artplayer-tool-github](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-github) | Github 弹幕库工具 | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-github.js%0A.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=github) | | +| [artplayer-react](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-react) | React 组件 | [demo](https://codesandbox.io/s/n74859y9rl) | +| [artplayer-vue](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vue) | Vue 组件 | [demo](https://codesandbox.io/s/6z76lm109n) | + +## 演示 + +[打开 Github Pages 演示](https://artplayer.org/) + +## 文档 + +[打开 Github Pages 文档](https://artplayer.org/document) + +## 安装 + +通过 `npm` 安装： + +```bash +$ npm install artplayer +``` + +或者通过 `yarn` 安装： + +```bash +$ yarn add artplayer +``` + +```js +import Artplayer from 'artplayer'; +import 'artplayer/dist/artplayer.css'; +``` + +或者直接引入`umd`文件： + +```html + + +``` + +将会导出全局变量到`window.Artplayer`. + +## 使用 + +```html +
+``` + +```js +var art = new Artplayer({ + container: '.artplayer-app', + url: 'path/to/video.mp4', +}); +``` + +## 贡献 + +安装依赖： + +```bash +$ npm install +$ npm run bootstrap +``` + +运行开发人员模式，然后选择要开发的项目： + +```bash +$ npm run dev +``` + +开启网页服务器： + +```bash +$ npm start +``` + +## 捐助 + +我们通过这些渠道接受捐赠： + +- [Paypal](https://www.paypal.me/harveyzack) +- [微信支付](./images/wechatpay.jpg) +- [支付宝](./images/alipay.jpg) + +## QQ 群 + +![QQ Group](./images/qqgroup.png) + +## 证书 + +MIT © [Harvey Zack](https://sleepy.im/) diff --git a/README.md b/README.md index edbc86cfa..2d5fe6f35 100644 --- a/README.md +++ b/README.md @@ -16,12 +16,12 @@ ## Features -- File Size - `artplayer.js` ≈ `90kb` and `artplayer.css` ≈ `20kb` +- Size - `artplayer.js` ≈ `90kb` and `artplayer.css` ≈ `20kb` - Subtitle - Support for `.VTT`, `.ASS` and `.SRT` formats - Customizable - `Right Click Menu`, `Business Layer`, `Video Controller` and `Settings Panel` - Controller - `Quality Switch`, `Subtitle Switch`, `Play Speed`, `Aspect Ratio`, `Video Flip`, `Fullscreen`, `Picture In Picture`, `Screenshot`, `Thumbnail`, `Adaptive Size`, `Highlight` and `Hotkey`... -- Built-in - `Auto PIP Mode`, `Open Local Subtitles`, `Open Local Video`, `Mini Progress Bar`, `Network Detection` and `Subtitle Time Offset` -- Integration - Support integration with other dependencies, like: `flv.js`, `hls.js`, `dash.js`, `shaka-player`, `webtorrent`... +- Built-in - `Auto PIP`, `Open Local Subtitles`, `Open Local Video`, `Mini Progress Bar`, `Network Detection` and `Subtitle Time Offset` +- Integration - Easy to integration with other dependencies: `flv.js`, `hls.js`, `dash.js`, `shaka-player`, `webtorrent`... - Code - Vanilla `ES6` and `SASS`, Highly decoupled code, clear structure, easy to track bugs and add new features - Document - Detailed interface documentation and rich code demo - API - Rich interface and response events, easy to interface with business or custom plugin @@ -29,16 +29,16 @@ ## Ecosystem -| Project | Description | Demo | -| --------------------------------------------------------------------------------------------------------------------- | ------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | -| [artplayer-plugin-danmuku](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmuku) | Danmuku plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku) | -| [artplayer-plugin-gif](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-gif) | Gif plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-gif.js&example=gif) | -| [artplayer-plugin-backlight](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-backlight) | Backlight plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-backlight.js&example=backlight) | -| [artplayer-plugin-playlist](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-playlist) | Playlist plugin for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-playlist.js%0A.%2Funcompiled%2Fartplayer-plugin-playlist.css&example=playlist) | -| [artplayer-tool-thumbnail](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-thumbnail) | Thumbnail tool for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-thumbnail.js&example=thumbnail) | -| [artplayer-tool-github](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-github) | Github api tool for ArtPlayer | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-github.js%0A.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=github) | | -| [artplayer-react](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-react) | React Component for Artplayer | [demo](https://codesandbox.io/s/n74859y9rl) | -| [artplayer-vue](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vue) | Vue Component for Artplayer | [demo](https://codesandbox.io/s/6z76lm109n) | +| Project | Description | Demo | +| --------------------------------------------------------------------------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | +| [artplayer-plugin-danmuku](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-danmuku) | Danmuku plugin | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=danmuku) | +| [artplayer-plugin-gif](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-gif) | Gif plugin | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-gif.js&example=gif) | +| [artplayer-plugin-backlight](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-backlight) | Backlight plugin | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-backlight.js&example=backlight) | +| [artplayer-plugin-playlist](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-plugin-playlist) | Playlist plugin | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-plugin-playlist.js%0A.%2Funcompiled%2Fartplayer-plugin-playlist.css&example=playlist) | +| [artplayer-tool-thumbnail](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-thumbnail) | Thumbnail tool | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-thumbnail.js&example=thumbnail) | +| [artplayer-tool-github](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-tool-github) | Github Danmuku tool | [demo](https://artplayer.org/?libs=.%2Funcompiled%2Fartplayer-tool-github.js%0A.%2Funcompiled%2Fartplayer-plugin-danmuku.js&example=github) | | +| [artplayer-react](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-react) | React Component | [demo](https://codesandbox.io/s/n74859y9rl) | +| [artplayer-vue](https://github.com/zhw2590582/ArtPlayer/tree/master/packages/artplayer-vue) | Vue Component | [demo](https://codesandbox.io/s/6z76lm109n) | ## Demo @@ -50,13 +50,13 @@ ## Install -Install with `npm` +Install with `npm`: ```bash $ npm install artplayer ``` -Or install with `yarn` +Or install with `yarn`: ```bash $ yarn add artplayer @@ -67,7 +67,7 @@ import Artplayer from 'artplayer'; import 'artplayer/dist/artplayer.css'; ``` -Or umd builds are also available +Or umd builds are also available: ```html @@ -91,20 +91,20 @@ var art = new Artplayer({ ## Contribution -Installation dependency +Installation dependency: ```bash $ npm install $ npm run bootstrap ``` -Run the developer mode and select the project you want to develop +Run the developer mode and select the project you want to develop: ```bash $ npm run dev ``` -Open web server +Open web server: ```bash $ npm start