react-tcplayer
v1.0.1
Published
react-tcplayer
Downloads
139
Readme
TCPlayer 的 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 | 图片访问路径 |