update version 2.1.2 edit document

README.md

@@ -59,6 +59,8 @@ const App = () => (
 
 #### Properties/Configuration Items
 
+The following attributes come from the `option` property configuration item
+
 | Parameter           | Description                                                  | type              | Default value |
 | ------------------- | ------------------------------------------------------------ | ----------------- | ------------- |
 | width               | The width of the video container (required)                  | `number`          | required      |
@@ -146,6 +148,20 @@ export interface videoAttributes<T = number, K = boolean> {
 | onvolumechange      | Callback when the volume changes                | (e: videoAttributes) => void |
 | onError             | Video playback failed callback                  | () => void                   |
 
+#### The parameter interface received by `JoLPlaye`r is as follows: :point_down:
+
+``` tsx
+export interface videoparameter extends Partial<videoCallback> {
+  style?: React.CSSProperties;
+  /**
+   * @description 组件的配置项
+   */
+  option: videoOption;
+  className?: string;
+  ref?: JoLPlayerRef
+}
+```
+
 ## :muscle:Later version
 
 - [ ] Add shortcut key function

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jol-player",
-  "version": "2.1.1",
+  "version": "2.1.2",
   "description": "简洁，美观，功能强大的react播放器，simple and beautiful, powerful react player",
   "main": "index.js",
   "scripts": {

src/core/index.tsx

@@ -20,6 +20,8 @@ import './index.scss';
 const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unknown> | undefined) {
   const {
     option,
+    className,
+    style,
     onProgressMouseDown,
     onPlay,
     onPause,
@@ -148,7 +150,7 @@ const JoLPlayer = function JoLPlayer(props: videoparameter, ref: React.Ref<unkno
   }, [videoRef.current, videoFlow, option]);
 
   return (
-    <figure className="JoL-player-container" ref={videoContainerRef}>
+    <figure className={`JoL-player-container ${className}`} ref={videoContainerRef} style={style}>
       <div className="JoL-light-off-mask" ref={lightOffMaskRef}></div>
       <video className="JoL-player" ref={videoRef} poster={poster ? poster : undefined}>
         {returnVideoSource}

zh.md

@@ -57,6 +57,8 @@ const App = () => (
 
 #### 属性/配置项
 
+如下属性来自`option`属性配置项
+
 | 参数                | 说明                                      | 类型              | 默认值   |
 | ------------------- | ----------------------------------------- | ----------------- | -------- | ----------- |
 | width               | 视频容器的 width（必传）                  | `number`          | 必传     |
@@ -144,6 +146,22 @@ export interface videoAttributes<T = number, K = boolean> {
 | onvolumechange      | 音量改变时的回调         | (e: videoAttributes) => void |
 | onError             | 视频播放失败的回调       | () => void                   |
 
+#### `JoLPlaye`r接收的参数接口如下：:point_down:
+
+``` tsx
+export interface videoparameter extends Partial<videoCallback> {
+  style?: React.CSSProperties;
+  /**
+   * @description 组件的配置项
+   */
+  option: videoOption;
+  className?: string;
+  ref?: JoLPlayerRef
+}
+```
+
+
+
 ## :muscle:后期版本
 
 - [ ] 增加快捷键功能