video基础介绍&封装react-video基础组件，ES6

　　好几个月没有写博客了，人都赖了，今天抽了一点时间把最近项目react中video整理了一下（感觉这个以后用的活比较多）

　　1.前三部部分详细归纳了video的基础知识，属性和功能；

　　2.第四部分是封装了一个video基础组件，所有事件都采用对外开放状态，在引入时可以直接书写用，小伙伴们可以直接参考example，对于其他属性比如是否采用浏览器控制条等，可以结合前三部分的梳理自己重新书写，这个要看具体项目要求。

<一> video基本知识

1. src -> 视频的属性；

2. poster -> 视频封面，没有播放时的封面

3. preload -> 预加载；

preload介绍:

　　此属性用于定义视频是否预加载。属性有三个可选择的值：none、metadata、auto。如果不使用此属性，默认为auto。

　　None：不进行预加载;

　　Metadata：部分预加载（包括尺寸，第一帧，曲目列表，持续时间等等）;

　　Auto：全部预加载;

4. autoplay -> 自动播放；

5.  loop -> 循环播放；

6. controls -> 浏览器自带控制条。

<二>video属性

来源: Media = document.getElementByid('video');

1.Media.cuttentTime = value -> 当前的播放位置，赋值可以改变位置；

2.Media.duration -> 当前资源长度，流返回无限；

3.Media.defaultPlaybackRate = value -> 默认的回放速度；

4.Media.playbackRate = value -> 当前的播放速度，设置后马上改变；

5.Media.played -> 返回已经播放的区域，TimeRanges(详情如下)；

6.Media.seekable -> 返回可以seek的区域，TimeRanges(详情如下)；

7. Media.ended -> 是否结束；

8.Media.autoPlay -> 是否自动播放；

9.Media.loop -> 是否循环播放；

10.Media.controls -> 是否有默认控制条；

11.Media.volume = value -> 返回当前音量，设置后可以马上改变；

12.Media.muted = value -> 静音，设置后马上改变。

13.TimeRanges简介

　　使用seekable属性返回代表视频、声频可移动播放部分的TimeRanges对象,TimeRanges对象 代表了用户操作滑条，进行选择播放的范围，为一时间段。

　　在TimeTanges事件中，针对视频、声频的播放部分，有表示开始点的start属性和结束点的end属性， 与currentTime相同， 容纳了以秒计算的实数值。start与end是以矩阵的形式存在的。

视频、声频完成缓冲前，用户可以操作滑条到任何位置。

　　该属性为只读属性。

 <三>事件类型

1.loadstart -> 客户端开始请求数据

2.progress -> 客户端正在请求数据

3.suspend -> 延迟下载

4.abort -> 客户端主动终止下载（不是因为错误引起）

5.loadstart -> 客户端开始请求数据

6.error -> 请求数据时遇到错误

7.stalled -> 网速失速

8.play -> play()和autoplay开始播放时触发

9.pause -> pause()触发

10.loadedmetadata -> 成功获取资源长度

11.waiting -> 等待数据，并非错误

12.playing -> 开始回放

13.canplay -> 可以播放，但中途可能因为加载而暂停

14.canplaythrough -> 可以播放，歌曲全部加载完毕

15.seeking -> 寻找中

16.seeked -> 寻找完毕

17.timeupdate -> 播放时间改变

18.ended -> 播放结束

19.ratechange -> 播放速率改变

20.durationchange -> 资源长度改变

21.volumechange -> 音量改变

<四>终于见到活例子了

 /*
 *    css 没有写，组件在自己使用的时候自己复写
 *    @return 方法
 *    -method {带on开头的事件是对外开放事件，所有事件在调用的地方用console.log()打印出来事件的目的，详情见参考）
 *        -onPlay()             开始播放
 *        -onPause()            暂停
 *        -onEnded()            播放完
 *        -onStalled()          网速不正常
 *        -onTimeupdate()       播放时间改变  // 类似input的change事件
 *        -onPlaying()          回播
 *        -onRatechange()       播放速率改变
 *        -onVolumechange()     播放音量改变
 *    @example
 *    <Video data={{...}} onPlay={_onPlay} onPause={_onPause} onEnded={_onEnded} onPlaying={_onPlaying} />
 */
 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>
         );
     }
 }
 export default Video;

备注: video --> 参考一  参考二  参考三  参考四