REACT--视频基础组件编写（功能还是比较完善的，采用ES6写法）
Posted 飞鲨
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了REACT--视频基础组件编写（功能还是比较完善的，采用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} id=\'video\'></video> 171 <button onClick={_this.btnPlay.bind(_this)}>{_this.state.playWord}</button> 172 </div> 173 ); 174 } 175 } 176 export default Video;
以上是关于REACT--视频基础组件编写（功能还是比较完善的，采用ES6写法）的主要内容，如果未能解决你的问题，请参考以下文章