summerskwTCPlayer 的 React 封装
使用说明
- 安装插件
npm install react-tcplayer- 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>- 页面中使用
<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 | 图片填充方式： default：居中并且以图片的实际分辨率进行显示。 stretch：拉伸铺满播放器区域，图片可能会变形。 cover：优先横向等比拉伸铺满播放器区域，图片某些部分可能无法显示在区域内。 |
| poster.src | string | 图片访问路径 |