Needlessly Promiscuous, Modularize!

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

    Keywords

    none

    Install

    npm i rc-video

    DownloadsWeekly Downloads

    0

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    21 kB

    Total Files

    6

    Last publish

    Collaborators

    • mraiguo