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 class Video extends Component {
17 constructor(props){
18 super(props);
19 this.state = {
20 poster:\'http://suo.im/DdnZw\', //网址过长，可以压缩
21 videoSrc:\'http://suo.im/3brxdp\',
22 playWord:\'播放\',
23 paused:true
24 }
25 }
26 _checkFn(fn){
27 return (typeof fn=="function"?fn:function(){});
28 }
29 _readyVideo(){
30 let media = this.media,_this = this;
31 let onBeforePlay = _this._checkFn(_this.props.onBeforePlay),
32 onLoadstart = _this._checkFn(_this.props.onLoadstart),
33 onProgress = _this._checkFn(_this.props.onProgress),
34 onSuspend = _this._checkFn(_this.props.onSuspend),
35 onAbort = _this._checkFn(_this.props.onAbort),
36 onPlay = _this._checkFn(_this.props.onPlay),
37 onPause = _this._checkFn(_this.props.onPause),
38 onError = _this._checkFn(_this.props.onError),
39 onStalled = _this._checkFn(_this.props.onStalled),
40 onLoadedmetadata = _this._checkFn(_this.props.onLoadedmetadata),
41 onLoadeddata = _this._checkFn(_this.props.onLoadeddata),
42 onWaiting = _this._checkFn(_this.props.onWaiting),
43 onPlaying = _this._checkFn(_this.props.onPlaying),
44 onCanplay = _this._checkFn(_this.props.onCanplay),
45 onCanplaythrough = _this._checkFn(_this.props.onCanplaythrough),
46 onSeeking = _this._checkFn(_this.props.onSeeking),
47 onSeeked = _this._checkFn(_this.props.onSeeked),
48 onTimeupdate = _this._checkFn(_this.props.onTimeupdate),
49 onEnded = _this._checkFn(_this.props.onEnded),
50 onRatechange = _this._checkFn(_this.props.onRatechange),
51 onDurationchange = _this._checkFn(_this.props.onDurationchange),
52 onVolumechange = _this._checkFn(_this.props.onVolumechange);
53 media.addEventListener(\'loadstart\',function(){
54 onLoadstart();
55 console.log(\'客户端开始请求数据\')
56 },false);
57 media.addEventListener(\'progress\',function(){
58 onProgress()
59 console.log(\'客户端正在请求数据\')
60 },false);
61 media.addEventListener(\'suspend\',function(){
62 onSuspend();
63 console.log(\'延迟下载\')
64 },false);
65 media.addEventListener(\'abort\',function(){
66 onAbort()
67 console.log(\'客户端主动终止下载（不是因为错误引起）\')
68 },false);
69 media.addEventListener(\'error\',function(){
70 onError();
71 console.log(\'请求数据时遇到错误\')
72 },false);
73 media.addEventListener(\'stalled\',function(){
74 onStalled();
75 console.log(\'网速失速\')
76 },false);
77 media.addEventListener(\'play\',function(){
78 onPlay();
79 console.log(\'初始播放\')
80 console.log(_this.media.played,78999999999999)
81 },false);
82 media.addEventListener(\'pause\',function(){
83 onPause();
84 console.log(\'初始暂停\')
85 },false);
86 media.addEventListener(\'loadedmetadata\',function(data){
87 onLoadedmetadata();
88 console.log(\'成功获取资源长度\')
89 },false);
90 media.addEventListener(\'loadeddata\',function(data){
91 onLoadeddata();
92 console.log(\'当前帧的数据加载完成且还没有足够的数据播放视频/音频（audio/video）的下一帧时触发\')
93 },false);
94 media.addEventListener(\'waiting\',function(){
95 onWaiting();
96 console.log(\'等待数据，并非错误\')
97 },false);
98 media.addEventListener(\'playing\',function(){
99 onPlaying();
100 console.log(\'开始回放\')
101 },false);
102 media.addEventListener(\'canplay\',function(){
103 onCanplay();
104 console.log(\'可以播放，但中途可能因为加载而暂停\')
105 },false);
106 media.addEventListener(\'canplaythrough\',function(){
107 onCanplaythrough();
108 console.log(\'可以播放，歌曲全部加载完毕\')
109 },false);
110 media.addEventListener(\'seeking\',function(){
111 onSeeking();
112 console.log(\'寻找中\')
113 },false);
114 media.addEventListener(\'seeked\',function(){
115 onSeeked();
116 console.log(\'寻找完毕\')
117 },false);
118 media.addEventListener(\'timeupdate\',function(){
119 onTimeupdate();
120 console.log(\'播放时间改变\') // 类似input的change事件
121 },false);
122 media.addEventListener(\'ended\',function(){
123 onEnded();
124 console.log(\'播放结束\') // 类似input的blur事件
125 },false);
126 media.addEventListener(\'ratechange\',function(){
127 onRatechange();
128 console.log(\'播放速率改变\')
129 },false);
130 media.addEventListener(\'durationchange\',function(){
131 onDurationchange();
132 console.log(\'资源长度改变\')
133 },false);
134 media.addEventListener(\'volumechange\',function(){
135 onVolumechange();
136 console.log(\'播放音量改变\')
137 },false);
138 }
139 componentDidMount(){
140 this.media = this.refs.video;
141 this._readyVideo();
142 }
143 btnPlay(){
144 let _this = this;
145 // _this.media.controls = true; 是否有控制条，如果不用浏览器自带控制条，可以设置false，然后自己复写样式和功能
146 // _this.media.muted true不是静音 false有声音
147 if(_this.state.paused){
148 _this.media.play();
149 _this.setState({paused:false,playWord:\'暂停\'});
150 }else{
151 _this.media.pause();
152 _this.setState({paused:true,playWord:\'播放\'});
153 }
154 let obj = {
155 a:_this.media.currentTime,
156 b:_this.media.startTime,
157 c:_this.media.duration,
158 d:_this.media.defaultPlaybackRate,
159 e:_this.media.playbackRate,
160 f:_this.media.seekable,
161 g:_this.media.volume,
162 h:_this.media.muted
163 }
164 console.log(obj)
165 }
166 render() {
167 let _this = this;
168 return (
169 <div>
170 <video src={_this.state.videoSrc} controls ref=\'video\' poster={this.state.poster} video\'></video>
171 <button onClick={_this.btnPlay.bind(_this)}>{_this.state.playWord}</button>
172 </div>
173 );
174 }
175 }
176 export default Video;