+
\ No newline at end of file
diff --git a/src/icons/svg/closeWebFullscreen.svg b/src/icons/svg/closeWebFullscreen.svg
new file mode 100644
index 0000000..0e0d266
--- /dev/null
+++ b/src/icons/svg/closeWebFullscreen.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/src/icons/svg/fullScreen.svg b/src/icons/svg/fullScreen.svg
index af49984..7ca004b 100644
--- a/src/icons/svg/fullScreen.svg
+++ b/src/icons/svg/fullScreen.svg
@@ -1 +1,14 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/icons/svg/inPicture.svg b/src/icons/svg/inPicture.svg
new file mode 100644
index 0000000..ed2f37f
--- /dev/null
+++ b/src/icons/svg/inPicture.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/src/icons/svg/mute.svg b/src/icons/svg/mute.svg
new file mode 100644
index 0000000..309dd80
--- /dev/null
+++ b/src/icons/svg/mute.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/src/icons/svg/pause.svg b/src/icons/svg/pause.svg
index 6b22437..0ed4d38 100644
--- a/src/icons/svg/pause.svg
+++ b/src/icons/svg/pause.svg
@@ -1 +1,14 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/icons/svg/player.svg b/src/icons/svg/player.svg
index f2a5a20..80b7a84 100644
--- a/src/icons/svg/player.svg
+++ b/src/icons/svg/player.svg
@@ -1 +1,14 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/icons/svg/screenshots.svg b/src/icons/svg/screenshots.svg
new file mode 100644
index 0000000..99ac911
--- /dev/null
+++ b/src/icons/svg/screenshots.svg
@@ -0,0 +1,13 @@
+
+
\ No newline at end of file
diff --git a/src/icons/svg/set.svg b/src/icons/svg/set.svg
index 3d5aa4b..7afa358 100644
--- a/src/icons/svg/set.svg
+++ b/src/icons/svg/set.svg
@@ -1,2 +1,14 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/icons/svg/volume.svg b/src/icons/svg/volume.svg
index 597b77c..358e3c6 100644
--- a/src/icons/svg/volume.svg
+++ b/src/icons/svg/volume.svg
@@ -1 +1,14 @@
-
\ No newline at end of file
+
+
\ No newline at end of file
diff --git a/src/icons/svg/webFullscreen.svg b/src/icons/svg/webFullscreen.svg
new file mode 100644
index 0000000..916a8dd
--- /dev/null
+++ b/src/icons/svg/webFullscreen.svg
@@ -0,0 +1,15 @@
+
+
\ No newline at end of file
diff --git a/src/index.d.ts b/src/index.d.ts
new file mode 100644
index 0000000..4b1b506
--- /dev/null
+++ b/src/index.d.ts
@@ -0,0 +1,193 @@
+/**
+ * @description JoL-palyer播放器组件声明文件
+ * @author lgf
+ * @time 2021-08-20
+ */
+import React from 'react';
+
+export type pausePlacement = 'bottomRight' | 'center';
+
+export type languageType = 'zh' | 'en';
+
+export interface videoOption
{
+ /**
+ * @description 视频容器的width
+ */
+ width: U;
+ /**
+ * @description 视频容器的height
+ */
+ height: U;
+ /**
+ * @description 视频地址
+ */
+ videoSrc: T;
+ /**
+ * @description 主题
+ */
+ theme?: T;
+ /**
+ * @description 视频封面图
+ */
+ poster?: T;
+ /**
+ * @description 自定义视频结束时显示的内容
+ */
+ setEndPlayContent?: React.ReactNode;
+ /**
+ * @description 自定义视频缓冲加载组件
+ */
+ setBufferContent?: React.ReactNode;
+ /**
+ * @description 暂停键的位置
+ */
+ pausePlacement?: pausePlacement;
+ /**
+ * @description 多少毫秒,无任何操作,隐藏鼠标和控制器/ms
+ */
+ hideMouseTime?: U;
+ /**
+ * @description 是否显示播放倍数功能
+ */
+ isShowMultiple?: K;
+ /**
+ * @description 是否显示设置功能
+ */
+ isShowSet?: K;
+ /**
+ * @description 是否显示截图功能
+ */
+ isShowScreenshot?: K;
+ /**
+ * @description 是否显示画中画
+ */
+ isShowPicture?: K;
+ /**
+ * @description 是否显示网页全屏
+ */
+ isShowWebFullScreen?: K;
+ /**
+ * @description 语言,默认中文
+ */
+ language?: languageType;
+}
+export interface videoAttributes {
+ /**
+ * @description 是否播放
+ */
+ isPlay: K;
+ /**
+ * @description 当前时间/s
+ */
+ currentTime: T;
+ /**
+ * @description 总时长
+ */
+ duration: T;
+ /**
+ * @description 缓存时长/s
+ */
+ bufferedTime: T;
+ /**
+ * @description 是否开启画中画
+ */
+ isPictureinpicture: K;
+ /**
+ * @description 音量
+ */
+ volume: T;
+ /**
+ * @description 视频播放倍数
+ */
+ multiple: T;
+ /**
+ * @description 是否结束
+ */
+ isEndEd: K;
+ /**
+ * @description 错误
+ */
+ error: null | T;
+}
+export type noParVoid = () => void;
+
+export type parVoid = (par: T) => void;
+
+export interface videoMethod {
+ /**
+ * @description 重新加载
+ */
+ load: T;
+ /**
+ * @description 开始播放
+ */
+ play: T;
+ /**
+ * @description 暂停
+ */
+ pause: T;
+ /**
+ * @description 设置音量
+ */
+ setVolume: parVoid;
+ /**
+ * @description 设置指定视频的播放位置/s
+ */
+ seek: parVoid;
+ /**
+ * @description 设置播放视频的地址src
+ */
+ setVideoSrc: parVoid;
+}
+export type callBackType = (e: videoAttributes) => void;
+export interface videoCallback {
+ /**
+ * @description 滑动条按下不放,拖动回调
+ */
+ onProgressMouseDown: T;
+ /**
+ * @description 视频开始播放回调
+ */
+ onPlay: T;
+ /**
+ * @description 视频暂停播放的回调
+ */
+ onPause: T;
+ /**
+ * @description 视频在播放,时间变化回调
+ */
+ onTimeChange: T;
+ /**
+ * @description 视频结束时回调
+ */
+ onEndEd: T;
+ /**
+ * @description 滑动条按下松开回调
+ */
+ onProgressMouseUp: T;
+ /**
+ * @description 视频播放失败的回调
+ */
+ onError: noParVoid;
+ /**
+ * @description 音量改变时的回调
+ */
+ onvolumechange: T;
+}
+export interface videoparameter extends Partial {
+ style?: React.CSSProperties;
+ /**
+ * @description 组件的配置项
+ */
+ option: videoOption;
+ className?: string;
+}
+export type JoLPlayerRef = videoMethod &
+ videoAttributes & {
+ video: HTMLVideoElement;
+ };
+
+interface CompoundedComponent
+ extends React.ForwardRefExoticComponent> {}
+declare const JolPlayer: CompoundedComponent;
+export default JolPlayer;
diff --git a/src/index.ts b/src/index.ts
index a9e2643..7791e8b 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,3 @@
-import * as JoLPlayerType from "@/interface";
-import JoLPlayer from "@/core/index";
-import "@/icons/";
-export { JoLPlayerType };
-export default JoLPlayer;
+import JoLPlayer from '@/core/index';
+import '@/icons/';
+export default JoLPlayer;
diff --git a/zh.md b/zh.md
new file mode 100644
index 0000000..4cfe0ce
--- /dev/null
+++ b/zh.md
@@ -0,0 +1,166 @@
+
+
+
+
+
+JoL-player
+
+简洁,美观,功能强大的react播放器
+
+
+
+
+
+
+
+
+
+
+简体中文 | [English](./README.md)
+
+## ✨ 特性
+
+- 📦 开箱即用的高质量 React 组件。
+- 🛡 使用 TypeScript 开发,提供完整的类型定义文件。
+- 🌍 国际化语言支持。
+- 🎨 主题,组件,定制能力。
+- :facepunch: 强大的 API 和回调函数
+- :zap: 体积小,80kb
+
+## 📦 安装
+
+```bash
+npm install jol-player --save
+```
+
+## 🔨 示例
+
+```tsx
+import JoLPlayer from "jol-player";
+
+const App = () => (
+ <>
+
+ >
+);
+```
+
+:point_right:[demo案例](https://codesandbox.io/s/inspiring-hawking-g5ukb?file=/src/App.tsx)
+
+## :blue_book: 文档
+
+#### 属性/配置项
+
+| 参数 | 说明 | 类型 | 默认值 |
+| ------------------- | ----------------------------------------- | ----------------- | -------- | ----------- |
+| width | 视频容器的 width(必传) | `number` | 必传 |
+| height | 视频容器的 height(必传) | `number` | 必传 |
+| videoSrc | 视频地址(必传) | `string` | 必传 |
+| theme | 主题 | `string` | \#ffb821 |
+| poster | 视频封面图 | `string` | - |
+| setEndPlayContent | 自定义视频结束时显示的内容 | `React.ReactNode` | - |
+| setBufferContent | 自定义视频缓冲加载组件 | `React.ReactNode` | - |
+| pausePlacement | 暂停键的位置 | `bottomRight` | `center` | bottomRight |
+| hideMouseTime | 多少毫秒,无任何操作,隐藏鼠标和控制器/ms | `number` | 2000 |
+| isShowMultiple | 是否显示播放倍数功能 | `boolean` | true |
+| isShowSet | 是否显示设置功能 | `boolean` | true |
+| isShowScreenshot | 是否显示截图功能 | `boolean` | true |
+| isShowPicture | 是否显示画中画 | `boolean` | true |
+| isShowWebFullScreen | 是否显示网页全屏 | `boolean` | true |
+| language | 语言 | `zh` | `en` | zh |
+
+#### 方法
+
+| 名称 | 说明 | 类型 |
+| ----------- | ------------------------ | ----------------------- |
+| load | 重新加载 | () => void |
+| pause | 暂停 | () => void |
+| play | 开始播放 | () => void |
+| setVolume | 设置音量,[0-100] | (par:`number` ) => void |
+| seek | 设置指定视频的播放位置/s | (par:`number` ) => void |
+| setVideoSrc | 设置播放视频的地址 src | (par:`string` ) => void |
+
+`提示:`如上方法要借助`ref`才能调用,如:xxx.current.load()
+
+:point_right:[具体请参看,demo案例](https://codesandbox.io/s/inspiring-hawking-g5ukb?file=/src/App.tsx)
+
+#### 回调函数
+
+```tsx
+export interface videoAttributes {
+ /**
+ * @description 是否播放
+ */
+ isPlay: K;
+ /**
+ * @description 当前时间/s
+ */
+ currentTime: T;
+ /**
+ * @description 总时长
+ */
+ duration: T;
+ /**
+ * @description 缓存时长/s
+ */
+ bufferedTime: T;
+ /**
+ * @description 是否开启画中画
+ */
+ isPictureinpicture: K;
+ /**
+ * @description 音量
+ */
+ volume: T;
+ /**
+ * @description 视频播放倍数
+ */
+ multiple: T;
+ /**
+ * @description 是否结束
+ */
+ isEndEd: K;
+ /**
+ * @description 错误
+ */
+ error: null | T;
+}
+```
+
+| 名称 | 说明 | 类型 |
+| ------------------- | ------------------------ | ---------------------------- |
+| onProgressMouseDown | 滑动条按下不放,拖动回调 | (e: videoAttributes) => void |
+| onProgressMouseUp | 滑动条按下松开回调 | (e: videoAttributes) => void |
+| onPlay | 视频开始播放回调 | (e: videoAttributes) => void |
+| onPause | 视频暂停播放的回调 | (e: videoAttributes) => void |
+| onTimeChange | 视频在播放,时间变化回调 | (e: videoAttributes) => void |
+| onEndEd | 视频结束时回调 | (e: videoAttributes) => void |
+| onvolumechange | 音量改变时的回调 | (e: videoAttributes) => void |
+| onError | 视频播放失败的回调 | () => void |
+
+## :muscle:后期版本
+
+- [ ] 增加快捷键功能
+- [ ] 增加视频清晰度选择列表
+- [ ] 增加暂停,播放,播放区动画效果
+- [ ] 增加自动播放功能
+
+## :rose:赞赏
+
+如果您认为该项目对您有所帮助,则可以给作者一个赞,作者非常感激:blush::blush::rose:
+
+## :european_castle:生态圈
+
+1. [ant-simple-pro](https://github.com/lgf196/ant-simple-pro)一款支持[vue3.0](https://github.com/vuejs/vue),[react](https://github.com/facebook/react),[angular](https://github.com/angular/angular),[typescript](https://github.com/microsoft/TypeScript)等多框架支持的中台前端解决方案
+2. [ant-simple-draw](https://github.com/lgf196/ant-simple-draw)一款在线图解编辑器,常用用于表示业务流程等
+3. [h5-Dooring](https://github.com/MrXujiang/h5-Dooring) 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站, 可视化设计
+
+[MIT](https://github.com/lgf196/ant-simple-pro/blob/master/LICENSE)
+
+Copyright (c) 2021-present LiGuoFeng
\ No newline at end of file