rc-video v0.0.5

视频播放器组件

视频播放器

何时使用

• 播放视频的时候

浏览器支持

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',
      loading: {
        url: '//cdncs.101.com/v0.1/static/fish/image/priview.jpg?size=80',
        time: 2000
      },
      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: '静音-mute',
          Unmute: '取消静音-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);

进度缩略图

import RcVideo from 'rc-video'
import "rc-video/lib/style/"
import "videojs-sprite-thumbnails"

class App extends React.Component {
  render() {
    const options = {
      videojsOptions: {
        controls: true,
        inactivityTimeout: 0,
        language: 'cu',
        // autoplay: true,
        poster: 'http://os71std62.bkt.clouddn.com/poster.jpg',
        sources: [
          {
            src: 'http://os71std62.bkt.clouddn.com/test.mp4',
            type: 'video/mp4'
          }
        ]
      },
      loadingLogo: {
        url: 'http://www.sucaijishi.com/uploadfile/2015/0210/20150210104951657.gif',
        time: 3000
      },
      onReady: (player) => {
        
        player.spriteThumbnails({
          url: 'http://v1.ws.wx.99.com/b/p/114/a60e6cca911c4fe09a936482694db99f/screenshot/8.jpg',
          width: 130,
          height: 74,
          interval: 1,
        });
      
      }
    }
    return (
       <RcVideo { ...options } />
    )
  }
}

ReactDOM.render(<App />, mountNode);

播放音频

import RcVideo from 'rc-video'

class App extends React.Component {
  render() {
    const options = {
      videojsOptions: {
        controls: true,
        inactivityTimeout: 0,
        language: 'cu',
        // autoplay: true,
        sources: [
          {
            src: 'http://os71std62.bkt.clouddn.com/%E7%89%9B%E5%A5%B6%E5%92%96%E5%95%A1%20-%20%E6%98%8E%E5%A4%A9%E4%BD%A0%E5%A5%BD.mp3',
            type: 'audio/mp3'
          }
        ]
      },
      mediaType: 'audio',
      onReady: (player) => {
        player.spriteThumbnails({
          url: 'http://v1.ws.wx.99.com/b/p/114/a60e6cca911c4fe09a936482694db99f/screenshot/8.jpg',
          width: 130,
          height: 74,
          interval: 0.1,
        });
      }
    }
    return (
       <RcVideo { ...options } />
    )
  }
}

ReactDOM.render(<App />, mountNode);

API

videojsOptions

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