diff --git a/README.md b/README.md index 616341c8..67eef4c4 100755 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ it can be staged loading for that does not support streaming mp4. This means sea 1. Install - ``` + ```bash $ npm install xgplayer ``` @@ -52,45 +52,28 @@ it can be staged loading for that does not support streaming mp4. This means sea ### Plugins -xgplayer provides more plugins. Plugins are divided into two categories: one is self-starting, and another inherits the player's core class named xgplayer. In principle, the officially provided plug-ins are self-starting and the packaged third-party libraries are inherited. Some feature plug-ins themselves can provide a downgrade scenario that suggests a self-start approach, or an inheritance approach if not. The player supports custom plugins for more content viewing [plugins](http://h5player.bytedance.com/en/plugins/) - -The following is how to use a self-starting plug-in： - -```js -import Player from 'xgplayer'; -import 'xgplayer-mp4'; - -const player = new Player({ - id: 'video', - url: '//abc.com/test.mp4' -}) -``` - -xgplayer-mp4plugin is self-starting, It loads mp4 video itself, parses mp4 format, implements custom loading, buffering, seamless switching, and so on. it will automatically downgrade devices that do not support [MSE](https://www.w3.org/TR/media-source/). [details](http://h5player.bytedance.com/en/plugins/#xgplayer-mp4) - - - -### Mobile Support - -xgplayer supports mobile terminal, but android device brand and system are numerous, there are much compatibility problems, the player provides whitelist mechanism to ensure the perfect operation in mobile terminal. [whitelist](http://h5player.bytedance.com/en/config/#whitelist) - +xgplayer provides more plugins and supports custom plugins, for more content viewing [plugins](http://h5player.bytedance.com/en/plugins/). There are many built-in plugins in the player, if you need to close specific plugins, you can disable them by [ignores](https://h5player.bytedance.com/config/#ignores) configuration ### Dev -For debugging, we provide the example video resource which size is large in github. You can clone the whole git repository which includes codes and example videos with 'git clone --recurse-submodules -j8'. With 'git clone' you will pull only codes of xgplayer and its plugins. +In order to debug by developers, we provide demos code in the fixtures directory of the repo. The player uses yarn for package management, and it only takes a few simple steps to start debugging in the repo -``` -$ git clone --recurse-submodules -j8 git@github.com:bytedance/xgplayer.git # OR git clone git@github.com:bytedance/xgplayer.git +```bash $ cd xgplayer -$ npm install -$ npm run dev +$ yarn +$ yarn dev:xgplayer ``` -please visit [http://localhost:9090/examples/index.html](http://localhost:9090/examples/index.html) +To debug other plugins, please refer to the scripts command provided in package.json in the root directory of the repo, such as: +```bash +$ yarn dev:hls +$ yarn dev:flv +$ yarn dev:mp4 +``` -### Agreement +### License Welcome to use xgplayer! Please read the following terms carefully. Using xgplayer means that you accept and agree to the terms. 1. Xgplayer is licensed under the [MIT](http://opensource.org/licenses/MIT) License. You comply with its obligations by default. diff --git a/README.zh-CN.md b/README.zh-CN.md index 77412bec..d13f0e3e 100755 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -28,7 +28,7 @@ 1. 安装 - ``` + ```bash $ npm install xgplayer ``` @@ -56,41 +56,26 @@ ### 插件 -西瓜播放器提供了较多的插件，插件分两类：一部分是自启动的，一部分是继承播放器核心类 xgplayer 的。原则上官方提供插件都是自启动的，封装的第三方类库都是继承方式。有些功能插件本身能提供降级方案建议使用自启动方式，否则建议使用继承方式。播放器支持自定义插件，更多内容查看 [插件](http://h5player.bytedance.com/plugins/) - -对于自启动的插件使用方法如下： - -```js -import Player from 'xgplayer' -import 'xgplayer-mp4' - -let player = new Player({ - id: 'video', - url: '//abc.com/test.mp4' -}) -``` - -xgplayer-mp4插件就是自启动的，它会自己加载 mp4 视频、解析 mp4 格式，实现自定义加载、缓冲、无缝切换等[详情]((http://h5player.bytedance.com/plugins/#xgplayer-mp4))。对于不支持 [MSE](https://www.w3.org/TR/media-source/) 的设备自动降级。 +西瓜播放器提供了较多的插件，并支持自定义插件，更多内容查看 [插件](http://h5player.bytedance.com/plugins/)。播放器内有不少内置插件，如果需要关闭某些插件可以通过 [ignores](https://h5player.bytedance.com/config/#ignores) 配置禁用 -### Mobile Support +### 开发调试 -西瓜播放器支持移动端，不过安卓设备品牌和系统众多，兼容性问题很多，播放器提供白名单机制保证在移动端完美的运行。[白名单机制](http://h5player.bytedance.com/config/#%E7%99%BD%E5%90%8D%E5%8D%95) +为了方便开发者调试，我们在仓库 fixtures 目录内提供了示例代码。播放器使用 yarn 进行包管理，只需简单几步即可开始在仓库内启动调试 - -### Dev - -为了方便开发者调试，我们提供了示例视频资源。示例文件较大，可使用 git clone --recurse-submodules -j8 命令完整拉取源码和示例文件；如果你只对源码感兴趣可以使用 git clone 命令仅拉取源码部分。 - -``` -$ git clone --recurse-submodules -j8 git@github.com:bytedance/xgplayer.git # 或者：git clone git@github.com:bytedance/xgplayer.git +```bash $ cd xgplayer -$ npm install -$ npm run dev +$ yarn +$ yarn dev:xgplayer ``` -访问 [http://localhost:9090/examples/index.html](http://localhost:9090/examples/index.html) +其它插件启动，请参考仓库根目录内 package.json 提供 scripts 命令，比如： +```bash +$ yarn dev:hls +$ yarn dev:flv +$ yarn dev:mp4 +``` ### 使用协议 diff --git a/packages/xgplayer/README.md b/packages/xgplayer/README.md index bd1c660b..67eef4c4 100755 --- a/packages/xgplayer/README.md +++ b/packages/xgplayer/README.md @@ -5,9 +5,6 @@ npm - - - license @@ -19,14 +16,14 @@ ### Introduction -xgplayer is a web video player library. it has designed a separate, detachable UI component based on the principle that everything is componentized. More importantly, it is not only flexible in the UI layer, but also bold in its functionality: it gets rid of video loading, buffering, and format support for video dependence. Especially on mp4 -it can be staged loading for that does not support streaming mp4. This means seamless switching with clarity, load control, and video savings. It also integrates on-demand and live support for FLV, HLS, and dash. [Document](http://h5player.bytedance.com/) +xgplayer is a web video player library. It has designed a separate, detachable UI component based on the principle that everything is componentized. More importantly, it is not only flexible in the UI layer, but also bold in its functionality: it gets rid of video loading, buffering, and format support for video dependence. Especially on mp4 +it can be staged loading for that does not support streaming mp4. This means seamless switching with clarity, load control, and video savings. It also integrates on-demand and live support for FLV, HLS, and dash. [Document](http://h5player.bytedance.com/en/) ### Start 1. Install - ``` + ```bash $ npm install xgplayer ``` @@ -48,51 +45,37 @@ it can be staged loading for that does not support streaming mp4. This means sea }) ``` - This is the easiest way to configure the player,then it runs with video. For more advanced content, see the plug-in section or documentation. [more config](http://h5player.bytedance.com/config.html) + This is the easiest way to configure the player, then it runs with video. For more advanced content, see the plug-in section or documentation. [more config](http://h5player.bytedance.com/en/config/) ### Plugins -xgplayer provides more plugins, plugins are divided into two categories: one is self-starting, and another inherits the player's core class named xgplayer. In principle, the officially provided plug-ins are self-starting and the packaged third-party libraries are inherited. Some feature plug-ins themselves can provide a downgrade scenario that suggests a self-start approach, or an inheritance approach if not. The player supports custom plugins for more content viewing [plugins](http://h5player.bytedance.com/) - -The following is how to use a self-starting plug-in： - -```js -import Player from 'xgplayer'; -import 'xgplyaer-mp4'; - -const player = new Player({ - id: 'video', - url: '//abc.com/test.mp4' -}) -``` - -xgplayer-mp4plugin is self-starting, It loads mp4 video itself, parses mp4 format, implements custom loading, buffering, seamless switching, and so on. it will automatically downgrade devices that do not support [MSE](https://www.w3.org/TR/media-source/). [details](http://h5player.bytedance.com/plugins/#xgplayer-mp4) - - - -### Mobile Support - -xgplayer supports mobile terminal, but android device brand and system are numerous, there are much compatibility problems, the player provides whitelist mechanism to ensure the perfect operation in mobile terminal. [whitelist](http://h5player.bytedance.com/config/#%E7%99%BD%E5%90%8D%E5%8D%95) - +xgplayer provides more plugins and supports custom plugins, for more content viewing [plugins](http://h5player.bytedance.com/en/plugins/). There are many built-in plugins in the player, if you need to close specific plugins, you can disable them by [ignores](https://h5player.bytedance.com/config/#ignores) configuration ### Dev -For debugging, we provide the example video resource which size is large in github. You can clone the whole git repository which includes codes and example videos with 'git clone --recurse-submodules -j8'. With 'git clone' you will pull only codes of xgplayer and its plugins. +In order to debug by developers, we provide demos code in the fixtures directory of the repo. The player uses yarn for package management, and it only takes a few simple steps to start debugging in the repo -``` -$ git clone --recurse-submodules -j8 git@github.com:bytedance/xgplayer.git # OR git clone git@github.com:bytedance/xgplayer.git +```bash $ cd xgplayer -$ npm install -$ npm run dev +$ yarn +$ yarn dev:xgplayer ``` -please visit [http://localhost:9090/examples/index.html](http://localhost:9090/examples/index.html) +To debug other plugins, please refer to the scripts command provided in package.json in the root directory of the repo, such as: +```bash +$ yarn dev:hls +$ yarn dev:flv +$ yarn dev:mp4 +``` ### License -[MIT](http://opensource.org/licenses/MIT) +Welcome to use xgplayer! Please read the following terms carefully. Using xgplayer means that you accept and agree to the terms. +1. Xgplayer is licensed under the [MIT](http://opensource.org/licenses/MIT) License. You comply with its obligations by default. +2. By default, you authorize us to place your logo in xgplayer website, which using xgplayer. +If you have any problem, please let us know.