REACT--视频基础组件编写（功能还是比较完善的，采用ES6写法）

/*
*    css 没有写，组件在自己使用的时候自己复写
*    @return 方法
*    -method {带on开头的事件是对外开放事件，所有事件在调用的地方用console.log()打印出来事件的目的，详情见参考）
*        -onPlay()             开始播放
*        -onPause()            暂停
*        -onEnded()            播放完
*        -onStalled()          网速不正常
*        -onTimeupdate()       播放时间改变  // 类似input的change事件
*        -onPlaying()          回播
*        -onRatechange()       播放速率改变
*        -onVolumechange()     播放音量改变　
*/
class Video extends Component {
    constructor(props){
        super(props);
        this.state = {
            poster:‘http://suo.im/DdnZw‘, //网址过长，可以压缩
            videoSrc:‘http://suo.im/3brxdp‘,
            playWord:‘播放‘,
            paused:true
        }
    }
    _checkFn(fn){
        return (typeof fn=="function"?fn:function(){});
    }
    _readyVideo(){
        let media = this.media,_this = this;
        let onBeforePlay = _this._checkFn(_this.props.onBeforePlay),
            onLoadstart = _this._checkFn(_this.props.onLoadstart),
            onProgress = _this._checkFn(_this.props.onProgress),
            onSuspend = _this._checkFn(_this.props.onSuspend),
            onAbort = _this._checkFn(_this.props.onAbort),
            onPlay = _this._checkFn(_this.props.onPlay),
            onPause = _this._checkFn(_this.props.onPause),
            onError = _this._checkFn(_this.props.onError),
            onStalled = _this._checkFn(_this.props.onStalled),
            onLoadedmetadata = _this._checkFn(_this.props.onLoadedmetadata),
            onLoadeddata = _this._checkFn(_this.props.onLoadeddata),
            onWaiting = _this._checkFn(_this.props.onWaiting),
            onPlaying = _this._checkFn(_this.props.onPlaying),
            onCanplay = _this._checkFn(_this.props.onCanplay),
            onCanplaythrough = _this._checkFn(_this.props.onCanplaythrough),
            onSeeking = _this._checkFn(_this.props.onSeeking),
            onSeeked = _this._checkFn(_this.props.onSeeked),
            onTimeupdate = _this._checkFn(_this.props.onTimeupdate),
            onEnded = _this._checkFn(_this.props.onEnded),
            onRatechange = _this._checkFn(_this.props.onRatechange),
            onDurationchange = _this._checkFn(_this.props.onDurationchange),
            onVolumechange = _this._checkFn(_this.props.onVolumechange);
        media.addEventListener(‘loadstart‘,function(){
            onLoadstart();
            console.log(‘客户端开始请求数据‘)
        },false);
        media.addEventListener(‘progress‘,function(){
            onProgress()
            console.log(‘客户端正在请求数据‘)
        },false);
        media.addEventListener(‘suspend‘,function(){
            onSuspend();
            console.log(‘延迟下载‘)
        },false);
        media.addEventListener(‘abort‘,function(){
            onAbort()
            console.log(‘客户端主动终止下载（不是因为错误引起）‘)
        },false);
        media.addEventListener(‘error‘,function(){
            onError();
            console.log(‘请求数据时遇到错误‘)
        },false);
        media.addEventListener(‘stalled‘,function(){
            onStalled();
            console.log(‘网速失速‘)
        },false);
        media.addEventListener(‘play‘,function(){
            onPlay();
            console.log(‘初始播放‘)
            console.log(_this.media.played,78999999999999)
        },false);
        media.addEventListener(‘pause‘,function(){
            onPause();
            console.log(‘初始暂停‘)
        },false);
        media.addEventListener(‘loadedmetadata‘,function(data){
            onLoadedmetadata();
            console.log(‘成功获取资源长度‘)
        },false);
        media.addEventListener(‘loadeddata‘,function(data){
            onLoadeddata();
            console.log(‘当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发‘)
        },false);
        media.addEventListener(‘waiting‘,function(){
            onWaiting();
            console.log(‘等待数据，并非错误‘)
        },false);
        media.addEventListener(‘playing‘,function(){
            onPlaying();
            console.log(‘开始回放‘)
        },false);
        media.addEventListener(‘canplay‘,function(){
            onCanplay();
            console.log(‘可以播放，但中途可能因为加载而暂停‘)
        },false);
        media.addEventListener(‘canplaythrough‘,function(){
            onCanplaythrough();
            console.log(‘可以播放，歌曲全部加载完毕‘)
        },false);
        media.addEventListener(‘seeking‘,function(){
            onSeeking();
            console.log(‘寻找中‘)
        },false);
        media.addEventListener(‘seeked‘,function(){
            onSeeked();
            console.log(‘寻找完毕‘)
        },false);
        media.addEventListener(‘timeupdate‘,function(){
            onTimeupdate();
            console.log(‘播放时间改变‘) // 类似input的change事件
        },false);
        media.addEventListener(‘ended‘,function(){
            onEnded();
            console.log(‘播放结束‘) // 类似input的blur事件
        },false);
        media.addEventListener(‘ratechange‘,function(){
            onRatechange();
            console.log(‘播放速率改变‘)
        },false);
        media.addEventListener(‘durationchange‘,function(){
            onDurationchange();
            console.log(‘资源长度改变‘)
        },false);
        media.addEventListener(‘volumechange‘,function(){
            onVolumechange();
            console.log(‘播放音量改变‘)
        },false);
    }
    componentDidMount(){
        this.media = this.refs.video;
        this._readyVideo();
    }
    btnPlay(){
        let _this = this;
        // _this.media.controls = true; 是否有控制条，如果不用浏览器自带控制条，可以设置false，然后自己复写样式和功能
        // _this.media.muted true不是静音 false有声音
        if(_this.state.paused){
            _this.media.play();
            _this.setState({paused:false,playWord:‘暂停‘});
        }else{
            _this.media.pause();
            _this.setState({paused:true,playWord:‘播放‘});
        }
        let obj = {
            a:_this.media.currentTime,
            b:_this.media.startTime,
            c:_this.media.duration,
            d:_this.media.defaultPlaybackRate,
            e:_this.media.playbackRate,
            f:_this.media.seekable,
            g:_this.media.volume,
            h:_this.media.muted
        }
        console.log(obj)
    }
    render() {
        let _this = this;
        return (
            <div>
                <video src={_this.state.videoSrc} controls ref=‘video‘ poster={this.state.poster} id=‘video‘></video>
                <button onClick={_this.btnPlay.bind(_this)}>{_this.state.playWord}</button>
            </div>
        );
    }
}