---
nav:
  title: Components
  path: /components
---

## Player

Demo:

```tsx
import React from 'react';
import { Player } from 'diversify-ui';
let obj = {
    titleStyle:{background:'#000',color:'#fff'},
    sourceList:[
        {id:1,name:'测试视频hdskjhfdjksahfjhdsajhfdkjashfjdhsafkjhdskjfh1',url:'http://peach.themazzone.com/durian/movies/sintel-1024-surround.mp4'},
        {id:2,name:'测试视频2',url:'http://vjs.zencdn.net/v/oceans.mp4'},
    ],
    playlist:true,
    sourceListPosition:'right',
    title:true
}
export default () => <Player {...obj}/>;
```
### 参数说明

| 参数               | 说明                                         | 类型                | 默认值              | 是否必传 | 版本号 |
| ------------------ | -------------------------------------------- | ------------------- | ------------------- | -------- | ------ |
| title              | 是否显示标题                                 | boolean             | false               | false    | 0.0.1  |
| titleStyle         | 标题样式                                     | CSSProperties       | { }                 | false    | 0.0.1  |
| sourceList         | 资源列表，`{name:'名称',url:'播放地址',...}` | Array`<Object>`     | [ ]                 | true     | 0.0.1  |
| titleContent       | 标题元素，`默认显示当前播放资源名称`         | ReactNode \| string | null                | false    | 0.0.1  |
| replayControl      | 是否显示向前跳播                             | boolean             | true                | false    | 0.0.1  |
| forwardControl     | 是否显示向后跳播                             | boolean             | true                | false    | 0.0.1  |
| changeControl      | 是否显示切换下/上一个资源按钮                | boolean             | false               | false    | 0.0.1  |
| volumeControl      | 是否显示声音调节控件                         | boolean             | true                | false    | 0.0.1  |
| speedControl       | 是否显示播放速率控件                         | boolean             | false               | false    | 0.0.1  |
| rates              | 播放速率列表                                 | Array`<number>`     | [5, 2, 1,0.75, 0.5] | false    | 0.0.1  |
| playlist           | 是否显示播放列表                             | boolean             | false               | false    | 0.0.1  |
| sourceListPosition | 播放列表位置,取值，`left/right`              | string              | 'right'             | false    | 0.0.1  |

More skills for writing demo: https://d.umijs.org/guide/demo-principle
