rc-video

0.0.5 • Public • Published

视频播放器组件


视频播放器

何时使用

  • 播放视频的时候

浏览器支持

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']

Readme

Keywords

none

Package Sidebar

Install

npm i rc-video

Weekly Downloads

6

Version

0.0.5

License

MIT

Unpacked Size

21 kB

Total Files

6

Last publish

Collaborators

  • mraiguo