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 -> 音量改变

<四>终于见到活例子了

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