笔者近来在用h5 的video来开发视频，上面来聊一聊是怎么一步一步填坑的。
一些在开发中的留神点，都在代码里的正文进行形容
根本需要
- 禁止全屏
- 是否自动播放
- 播放器尺寸的设置
- 播放结束时回到初始状态
1. 禁止全屏
webkit-playsInline={true} // iosx5-playsInline ={true}// androidplaysInline ={true}//ios10留神：笔者在这里用的是video-react，所以是playsInline，如果应用原生video的话，是playsinline
2. 是否自动播放
- 设置自动播放须要设置autoPlay属性
- 笔者所遇到的需要是，由后端接口管制是否默认播放，所以在这里分为两个步骤
// 步骤1：在video标签里设置autoPlay=false<VideoReact src={video_url} webkit-playsInline={true} x5-playsInline ={true} playsInline ={true} autoPlay={false} </VideoReact>// 步骤2：依据接口的返回值来设置自动播放handleVideoPlay = (is_first) => { let { item: {video_play}, ref_name } = this.props; let ref_name_state = this.state.ref_name; let video = this[ref_name_state].video; if(video_play){// 自动播放, video_play由后端返回 if(is_first){ // 首次播放时加延时，防止了在视频未加载胜利时就播放 this.video_timeout = setTimeout(() => { video.play(); }, 300) } }}3. 播放器尺寸的设置
在这里，采纳固定视频的宽度，依据视频的封面尺寸来计算视频的高度的算法。
- 在应用video-react时，发现设置height时，不能应用rem尺寸，只能用px和%，然而后两种单位不能兼容不同的分辨率。所以在这里采纳管制视频外层div的尺寸的办法，而将视频的尺寸都设置为100%
// 有封面尺寸时，依据封面的宽高比计算高度；没有封面尺寸时，依据16：9计算高度let video_height_cal = cover_width ? ((710 * (cover_height/cover_width)/100)): 3.9938;return ( <div style={{height: video_height_cal+'rem', width: '7.1rem'}}> // 视频外层div的尺寸设置 <VideoReact src={video_url} webkit-playsInline={true} x5-playsInline ={true} playsInline ={true} autoPlay={false} width={'100%'} height={'100%'} </VideoReact></div> )通过以上设置之后，视频外层div、播放器、video、封面的尺寸都放弃了统一，然而在实际上，却还是在局部机型上有黑边呈现（黑边：播放器的背景色，有黑边阐明视频和封面没有齐全遮蔽播放器）
- 解决办法：增大封面和视频的尺寸，以使其能齐全遮蔽播放器
.video-react-poster{ height: 100.1%; // 增大封面的高度， top: -0.1px; // 调整地位 // 额定问题 // 禁止封面的图片反复展现 background-repeat: no-repeat; // 尽可能的缩放背景并放弃图像的宽高比例 background-size: contain; // 设置完上一个属性后，发现图片并不是高低居中的，所以设置了背景的起始地位 background-position: center; }.video-react-has-started{ .video-react-video{ height: 100.3%; //增大视频的高度 width: auto;//视频的宽度自适应 top: -0.4px; // 调整地位 left: -0.2px; // 额定问题 // 设置max-width是为了防止在将视频全屏播放时，宽度还是auto导致超出屏幕宽度的景象 max-width: 110%; } }4. 播放结束时回到初始状态
- 采纳的办法是：播放完结时，从新load以后视频
componentDidMount() { this.videoLoadSuccess();}videoLoadSuccess = () => { let video = document.querySelector('video'); let { ref_name } =this.state; // 在视频达到能够播放的状态时，监听其状态变动 video.addEventListener('canplaythrough', (event) => { // 因为canplaythrough会触发屡次，所以在这里增加了对canplaythrough触发的限度，只有当缓存数组里没有该值时，才去监听 if(!play_through_cache[ref_name]){ play_through_cache[ref_name] = 1; this[ref_name].subscribeToStateChange(this.handleStateChange); } })}// 依据视频的状态变动，判断其是否播放实现handleStateChange = (state, preState) = > { // 视频播放完结回到初始状态（进度条） if(state.ended && !prevState.ended){ this[this.state.ref_name].video.load(); }}心愿大家能继续关注哦，留一些个人信息不便大家找到我哦。
github