@x-edu/video-player v0.0.1

视频播放器组件

视频播放器

何时使用

• 播放音/视频的时候

浏览器支持

IE 9+

安装

npm install videoplayer --save

运行

# 默认开启服务器，地址为 ：http://local:8000/

# 能在ie9+下浏览本站，修改代码后自动重新构建，且能在ie10+运行热更新，页面会自动刷新
npm run start

# 构建生产环境静态文件，用于发布文档
npm run site

代码演示

hls自定义key解密流程

除了标准的解密流程外，还支持自定义解密流程。

import videoplayer from '@sdp.nd/videoplayer'
import "@sdp.nd/videoplayer/lib/style/"
import getNdrHlsKey from '@sdp.nd/ndr-hls-decrypt';

const hlsOptions = {
  hls: {
    keyCallback: (callback, url) => {
      getNdrHlsKey(url).then(key => {
        callback(key);
      });
    },
  },
};

class App extends React.Component {
  componentDidMount () {
    const options = {
      controls: true,
      plugins: {
        videoJsResolutionSwitcher: {
          default: 'high',
          dynamicLabel: true
        }
      },
      resources: [
        {
          src:
            'http://r1-ndr.ykt.cbern.com.cn/esp_courseareobject/exercise_video/c6d07723-d7ba-44ce-95b5-c5408cf7b203/transcode/52ff3688-808c-48e7-9b66-b59879c4da30-1920x1080-818f9782acc5d5f2ffd16f9f1048409a.m3u8',
            type: 'application/x-mpegURL',
          label: '标清'
          },
        {
          src: 'http://r1-ndr.ykt.cbern.com.cn/esp_courseareobject/exercise_video/c6d07723-d7ba-44ce-95b5-c5408cf7b203/transcode/52ff3688-808c-48e7-9b66-b59879c4da30-1920x1080-818f9782acc5d5f2ffd16f9f1048409a.m3u8',
          type: 'application/x-mpegURL',
          label: '高清'
        }
        ],
      techOrder: ['html5', 'flash'],
      html5: hlsOptions, flash: hlsOptions
    }
    const player = videoplayer(this.videoNode, options)
  }

  render() {
    return (
      <div data-vjs-player>
        <video ref={ node => this.videoNode = node } className="video-js" />
      </div>
    )
  }
}

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

走马灯(视频水印设置)

设置视频水印。

.main-container {
  overflow: visible;
}

import videoplayer from '@sdp.nd/videoplayer'
import "@sdp.nd/videoplayer/lib/style/"

class App extends React.Component {
  componentDidMount () {
    const options = {
      watermark: {
        userInfo: {
          real_name: 'janya',
          mobile: '11122222222',
          user_id: '1230984712039487',
        },
        domainScope: ['localhost']
      },
      fluid: true, // 自适应
      controls: true,
      playbackRates: [0.75, 1, 1.25, 1.5, 1.75, 2],
      inactivityTimeout: 2000, // 设置闲置2s后控制条隐藏
      sources: [{ // 视频源
        src: '//cdncs.101.com/v0.1/static/fish/media/ocean.mp4',
        type: 'video/mp4'
      }],
      tracks: [{ // 字幕源
        kind: 'captions',
        src: '//cdncs.101.com/v0.1/static/fish/media/test.vtt',
        srclang: 'en',
        label: 'english',
        default: 'default'
      }],
      rateChangeTip: {
        text: (player) => {
            return `正在切换到<span style="color: blue;">${player.playbackRate()}</span>倍速`
        }
      }
    }
    this.player = videoplayer(this.videoNode, options)
  }
  setDragTime = () => {
    if (this.player) {
      console.log(this.input.value)
      this.player.dragTime = parseInt(this.input.value) || 0
    } else {
      alert('播放器未初始化完成！')
    }
  }
  render () {
    return (
      <div>
        <div data-vjs-player>
          <video ref={ node => this.videoNode = node } className="video-js vjs-big-play-centered" />
        </div>
        <input ref={node => this.input = node} />
        <button onClick={this.setDragTime}>动态设置可拖拽时间</button>
      </div>
    )
  }
}

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

options

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

loadingLogo

spriteThumbnails

markers

参考

resources

参考

player方法

通过调用实例化后的player方法，可以控制播放，暂停，播放速率等；更多方法参考

player事件

更多事件参考

video.js的插件编写

组件内部使用了video.js, 因此可以使用video.js的开发插件方法，添加更多个性化的功能。 插件的开发参考。 组件内置了如下三个插件：

• 标记点插件
• 切换清晰度源插件
• 预览图插件