# rc-video
> 基于video.js的react视频播放器组件
Latest version **0.0.5** (published 2018-09-30) · MIT license · 0 weekly downloads
## Install
```sh
npm install rc-video
pnpm add rc-video
yarn add rc-video
bun add rc-video
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.5 |
| Published | 2018-09-30 |
| First published | 2018-09-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6 |
| Dependencies | 3 |
| Unpacked size | 20.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | mraiguo |
| Maintainers | mraiguo |
## Links
- npm: https://www.npmjs.com/package/rc-video
- npm.io page: https://npm.io/package/rc-video
## Dependencies (3)
- [video.js](https://npm.io/package/video.js.md) ^6.2.5
- [babel-runtime](https://npm.io/package/babel-runtime.md) ^6.22.0
- [videojs-flash](https://npm.io/package/videojs-flash.md) ^2.1.1
## Recent versions
- 0.0.5 (latest) — 2018-09-30
- 0.0.6 (beta) — 2018-10-11
- 0.0.4 — 2018-09-29
- 0.0.3 — 2018-09-28
- 0.0.2 — 2018-09-27
- 0.0.1 — 2018-09-26
## README
# 视频播放器组件
---
视频播放器
## 何时使用
- 播放视频的时候
## 浏览器支持
IE 9+
## 安装
```bash
npm install rc-video --save
```
## 运行
```bash
# 默认开启服务器，地址为 ：http://local:8000/
# 能在ie9+下浏览本站，修改代码后自动重新构建，且能在ie10+运行热更新，页面会自动刷新
npm run start
# 构建生产环境静态文件，用于发布文档
npm run site
```
## 代码演示
### 基本
基本用法。
```jsx
import RcVideo from 'rc-video'
import "rc-video/lib/style/"
class App extends React.Component {
render() {
const options = {
videojsOptions: {
controls: true,
inactivityTimeout: 0,
poster: 'http://os71std62.bkt.clouddn.com/poster.jpg',
sources: [
{
src: 'http://www.w3school.com.cn/i/movie.ogg',
type: 'video/ogg'
},{
src: 'http://os71std62.bkt.clouddn.com/test.mp4',
type: 'video/mp4'
}
]
},
logo: 'http://os71std62.bkt.clouddn.com/logo.gif',
className: 'vjs-big-play-centered',
onReady: (player) => {
// 监听全屏事件
player.on('fullscreenchange', () => {
console.log('全屏')
})
// 监听跳转播放事件
player.on('seeked', () => {
console.log('跳转')
})
}
}
return (
)
}
}
ReactDOM.render(, mountNode);
```
### 字幕
为视频添加字幕。
```jsx
import RcVideo from 'rc-video'
import "rc-video/lib/style/"
class App extends React.Component {
render() {
const options = {
videojsOptions: {
controls: true,
fluid: true,
playbackRates: [0.5, 1, 1.5, 2],
sources: [{
src: 'http://www.runoob.com/try/demo_source/movie.mp4',
type: 'video/mp4'
}],
},
onReady: (player) => {
const track = {
kind: 'captions',
src: 'http://os71std62.bkt.clouddn.com/test.vtt',
srclang: 'en',
label: 'english',
default: 'default'
}
player.addRemoteTextTrack(track, false);
}
}
return (
)
}
}
ReactDOM.render(, mountNode);
```
### flash
使用flash播放。
```jsx
import RcVideo from 'rc-video'
import "rc-video/lib/style/"
class App extends React.Component {
render() {
const options = {
videojsOptions: {
controls: true,
width: 500,
height: 400,
sources: [{
src: 'http://www.appstate.edu/~meltonml/mighty_mouse.f4v',
type: 'video/flv'
}],
techOrder: ['flash'],
}
}
return (
)
}
}
ReactDOM.render(, mountNode);
```
### 国际化
```jsx
import RcVideo from 'rc-video'
import "rc-video/lib/style/"
class App extends React.Component {
render() {
const options = {
videojsOptions: {
controls: true,
inactivityTimeout: 0,
language: 'cu',
poster: 'http://os71std62.bkt.clouddn.com/poster.jpg',
sources: [
{
src: 'http://www.w3school.com.cn/i/movie.ogg',
type: 'video/ogg'
},{
src: 'http://www.runoob.com/try/demo_source/movie.mp4',
type: 'video/mp4'
}
]
},
locale: {
lang: 'cu',
locale: {
Play: '播放-play',
Mute: '静音',
Unmute: '取消静音'
}
},
logo: 'http://os71std62.bkt.clouddn.com/logo.gif',
className: 'vjs-big-play-centered',
onReady: (player) => {
// 监听全屏事件
player.on('fullscreenchange', () => {
console.log('全屏')
})
// 监听跳转播放事件
player.on('seeked', () => {
console.log('跳转')
})
}
}
return (
)
}
}
ReactDOM.render(, mountNode);
```
## API
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------- | ---------- |-------|
| logo | 控制栏右下角logo图标的url地址 | string | 无 |
| className | 为video标签设置class；video.js提供了默认的如`vjs-big-play-centered`表示播放按钮居中，`vjs-fluid`表示自适应容器大小 | string | 无 |
| onReady | 视频初始化完成后的回调， 一些异步的操作可以在这里完成，参数为实例化后的player | function(player) | () => {} |
| locale | 国际化对象，形如： { lang: 'en', locale: { 'Play': 'Play', 'Pause': 'Pause'}} | object: { lang: string, locale: object } | 无 |
| videojsOptions | [video.js](https://github.com/videojs/video.js)库的参数 | [object](#videojsOptions) | 无 |
### videojsOptions
组件使用了videojs6.x，这里列出来一些常用参数，更多用法[参考](https://docs.videojs.com/tutorial-options.html)
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------- | ---------- |-------|
| inactivityTimeout | 闲置超时，单位为毫秒；值为0表示没有 | number | 3000 |
| controls | 是否显示控制条；当没有控制条的时候，需要使用autoplay属性或者通过player API来控制播放 | boolean | false |
| width | 设置视频播放器的宽度(以像素为单位);当使用如`50%`的时候，会被自动转换为`50px` | string\|number | 640 |
| height | 设置视频播放器的高度(以像素为单位);当使用如`50%`的时候，会被自动转换为`50px` | string\|number | 480 |
| fluid | 设置为true时将会自适应容器大小，设置className为`vjs-fluid`有相同效果 | boolean | false |
| playbackRates | 播放速度，由大于0的数字组成的数组, 当有值时，控制栏会出现一个播放速度控制按钮 | Array | 3000 |
| poster | 视频开始前的封面图片 | string | 无 |
| sources | 对应video标签下的一系列souce标签的数组对象，对象内需要有src和type属性 | Array<{src: string, type: string}> | 无 |
| techOrder | 定义优先用那种方式播放视频，默认使用html5，组件里内置了flash播放；比如使用`['html5', 'flash']`表示优先使用html5，无法播放时使用flash;你也可以根据需要注册其他技术 | Array | \['html5'\] |
---
_Source: https://npm.io/package/rc-video · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._