rc-video

视频播放器组件

---

视频播放器

何时使用

• 播放视频的时候

浏览器支持

IE 9+

安装

npm install rc-video --save

运行

# 默认开启服务器，地址为 ：http://local:8000/ 
 
# 能在ie9+下浏览本站，修改代码后自动重新构建，且能在ie10+运行热更新，页面会自动刷新 
npm run start
 
# 构建生产环境静态文件，用于发布文档 
npm run site

代码演示

基本

基本用法。

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 (
       <RcVideo { ...options } />
    )
  }
}
 
ReactDOM.render(<App />, mountNode);

字幕

为视频添加字幕。

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 (
       <RcVideo { ...options } />
    )
  }
}
 
ReactDOM.render(<App />, mountNode);

flash

使用flash播放。

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 (
       <RcVideo { ...options } />
    )
  }
}
 
ReactDOM.render(<App />, mountNode);

国际化

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 (
       <RcVideo { ...options } />
    )
  }
}
 
ReactDOM.render(<App />, 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库的参数	object	无

videojsOptions

组件使用了videojs6.x，这里列出来一些常用参数，更多用法参考

参数	说明	类型	默认值
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<Number>	3000
poster	视频开始前的封面图片	string	无
sources	对应video标签下的一系列souce标签的数组对象，对象内需要有src和type属性	Array<{src: string, type: string}>	无
techOrder	定义优先用那种方式播放视频，默认使用html5，组件里内置了flash播放；比如使用['html5', 'flash']表示优先使用html5，无法播放时使用flash;你也可以根据需要注册其他技术	Array<String>	['html5']