react-tcplayer
Version:
react-tcplayer
37 lines (26 loc) • 2.08 kB
Markdown
TCPlayer 的 React 封装
### 使用说明
1. 安装插件
```
npm install react-tcplayer
```
2. public/index.html 中在 heah 中添加播放器插件 js
```
<head>
<script src="//imgcache.qq.com/open/qcloud/video/vcplayer/TcPlayer-2.3.2.js" charset="utf-8"></script>
</head>
```
3. 页面中使用
```
<div style={{ width: '400px', height: '300px' }}>
<ReactTcplayer src={src} poster={{style:"stretch", src:"imgPath"}}}/>
</div>
```
> 播放器组件的宽度和高度由父级容器的高宽来决定，每次设置新的 src 时会重新获取高宽
### 参数说明
| 参数 | 类型 | 说明 |
| ------------ | ------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| src | string | 视频源地址，支持 rtmp 和 hls |
| poster | object | 无视频流时显示的图像及样式 |
| poster.style | string | 图片填充方式： <br />default：居中并且以图片的实际分辨率进行显示。<br />stretch：拉伸铺满播放器区域，图片可能会变形。<br />cover：优先横向等比拉伸铺满播放器区域，图片某些部分可能无法显示在区域内。 |
| poster.src | string | 图片访问路径 |