笔者近来在用 h5 的 video 来开发视频,上面来聊一聊是怎么一步一步填坑的。
一些在开发中的留神点,都在代码里的正文进行形容
根本需要
- 禁止全屏
- 是否自动播放
- 播放器尺寸的设置
- 播放结束时回到初始状态
1. 禁止全屏
webkit-playsInline={true} // ios
x5-playsInline ={true}// android
playsInline ={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