react-native 封装视频播放器react-native-video的使用
作者：在下月亮有何贵干
本文主要介绍了react-native 封装视频播放器react-native-video的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
前言
最近工作业务用到了react-native-video，还需要能够全屏，全屏需要用到锁定应用方向（横屏），需要用到组件react-native-orientation-locker，本文记录使用方法以及提供一种解决思路。
react-native-orientation-locker
横竖屏方法
我就只介绍这常用的三个，其他的可以翻看官方文档
import Orientation from 'react-native-orientation-locker'; Orientation.lockToLandscapeLeft() // 向左方向锁定横屏 Orientation.lockToLandscapeRight() // 向右方向锁定横屏 Orientation.unlockAllOrientations(); // 解除锁定 Orientation.lockToPortrait(); // 锁定竖屏
react-native-video
导入
import Video from 'react-native-video';
函数部分
// 设置总时长
setDuration({ duration }) {
this.setState({ duration });
}
// 播放结束可将暂停变量设置为true
onEnd() {
this.setState({
paused: true,
});
}
// 缓冲，loading变量可控制缓冲圈显示
onBuffer({ isBuffering }) {
this.setState({ loading: isBuffering });
}
// 设置进度条和播放时间的变化，sliderValue用来同步步进器
setTime({ currentTime }) {
this.setState({
sliderValue: currentTime,
});
}
// 播放暂停
changePlayed() {
this.setState({ paused: !this.state.paused });
}视频组件
<View style={styles.Video}>
{
loading ? <View style={styles.loading}>
<ActivityIndicator size='large' color='lightgray' /> // 缓冲圈
</View> : null
}
<Video
ref={(ref: Video) => {
this.video = ref; // 视频Video的ref
}}
source={{
uri: 'http://xxx/xxx.mp4', //播放路径
}}
style={{ width: '100%', height: '100%' }}
rete={1}
volume={1}
paused={paused} // 暂停变量
onEnd={() => {
this.onEnd(); // 播放结束时执行
}}
onBuffer={data => this.onBuffer(data)} // 缓冲时执行,用于显示缓冲圈
onProgress={data => this.setTime(data)} // 播放时执行函数,用于同步步进器进度
onLoad={data => this.setDuration(data)} // 播放前得到总时长,用于步进器设置总长
muted={muted} // 静音
/>
</View>控制台
<View style={styles.videoControl}>
{/* 暂停按钮 */}
<TouchableOpacity
onPress={() => {
this.changePlayed();
}}
>
<Image style={styles.paused} source={paused ? pausedImg : played} />
</TouchableOpacity>
<Slider
value={sliderValue}
maximumValue={duration}
// onValueChange 和 onSlidingComplete 是修改步进器进度时触发的函数
// 可以在此时同步视频播放,同步视频播放的函数是,video的Ref.seek()
// 中间需要设置视频暂停和播放，否则边拖动边播放会很奇怪
onValueChange={(value) => {
this.video.seek(value);
this.setState({
paused: true,
});
}}
onSlidingComplete={(value) => {
this.video.seek(value);
this.setState({
paused: false,
});
}}
style={styles.slider}
/>
{/* 静音按钮 */}
<TouchableOpacity
onPress={() => {
this.setState({ muted: !muted });
}}
>
<Image style={{ marginLeft: 10, height: 24, width: 24 }} source={muted ? mute : sound} />
</TouchableOpacity>
{/* 全屏按钮 */}
<TouchableOpacity
onPress={() => {
// 这里涉及到react-native-orientation-locker
// 可以锁定应用为横屏，这里的状态设置是我的全屏解决方案
this.setState({ fullVideoShow: true, sliderValue2: sliderValue }, () => {
this.setState({ paused: true });// 需要将原视频暂停
});
Orientation.lockToLandscapeLeft();
}}
>
<Image style={{ marginLeft: 10, height: 20, width: 20 }} source={fullScreen} />
</TouchableOpacity>
</View>全屏实现方案（可参考）
我采用的是弹出层方案，使用Orientation横屏时，新建一个model层覆盖全屏，然后新建一个相同的播放组件，记得将原视频组件暂停。
可以参考的点，以下表示model层上的视频组件
// 放大时，总长已经不需要再次获取，我们可以在onLoad2时将sliderValue赋值给video2
// 达到放大时同步进度的效果
onLoad2(data) {
this.video2.seek(this.state.sliderValue);
}
// 设置vedio2的同步步进器2进度时，需要注意，currentTime>0再赋值
// 否则在视频加载过程中会出现步进器2跳一下0再恢复的情况
setTime2({ currentTime }) {
if (currentTime > 0) {
this.setState({
sliderValue2: currentTime,
});
}
}
// 退出全屏
outFullScreen() {
const { sliderValue2, paused2 } = this.state;
this.setState({ fullVideoShow: false, sliderValue: sliderValue2);
Orientation.lockToPortrait();
// 退出时将原视频进度同步
this.video.seek(sliderValue2);
}
// 播放暂停
changePlayed2() {
this.setState({ paused2: !this.state.paused2 });
}
// 另外全屏时，要将原视频paused暂停，可以在全屏按钮事件那里我有提到。放大视频
<Modal
visible={fullVideoShow}
transparent
animationType='slide'
>
<View style={styles.videoModelBack}>
<View style={styles.videoModel}>
{
loading ? <View style={styles.loading}>
<ActivityIndicator size='large' color='lightgray' /> //缓冲圈可复用状态
</View> : null
}
<View style={{ flex: 1 }}>
<Video
ref={(ref: Video) => {
this.video2 = ref;
}}
source={{
uri: 'http://xxx/xxx.mp4',
}}
style={{ flex: 1 }}
rete={1}
volume={1}
paused={paused2}
onEnd={() => {
this.onEnd(0);
}}
onBuffer={data => this.onBuffer(data)}
onProgress={data => this.setTime2(data)}
onLoad={data => this.onLoad2(data)}
muted={muted}
/>
</View>
</View>
<View style={styles.videoBack}>
<TouchableOpacity
onPress={() => {
this.changePlayed2();
}}
>
<Image style={[styles.paused]} source={paused2 ? pausedImg : played} />
</TouchableOpacity>
<Slider
value={sliderValue2}
maximumValue={duration}
onValueChange={(value) => {
this.video2.seek(value);
this.setState({
paused2: true,
});
}}
onSlidingComplete={(value) => {
this.video2.seek(value);
this.setState({
paused2: false,
});
}}
style={styles.slider}
/>
<TouchableOpacity
onPress={() => {
this.setState({ muted: !muted });
}}
>
<Image style={styles.img} source={muted ? mute : sound} />
</TouchableOpacity>
<TouchableOpacity
onPress={() => {
this.outFullScreen();
}}
>
<Image source={outFullScreen} /> // 退出全屏按钮
</TouchableOpacity>
</View>
</View>
</Modal>尾言
样式我没有写出来，因为内容可能比较多，布局情况也不大相同，想完全复用不太现实，不过如果你耐心点理解重要的部分，相信你会有所收获。
到此这篇关于react-native 封装视频播放器react-native-video的使用的文章就介绍到这了,更多相关react-native 视频播放器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！