react-native 封装视频播放器react-native-video的使用
更新时间：2023年01月31日 15:07:03 作者：在下月亮有何贵干
本文主要介绍了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 视频播放器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家介绍了Header组件热门搜索栏的实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
这篇文章主要为大家介绍了React组件如何优雅地处理异步数据示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了React组件通信,在开发中组件通信是React中的一个重要的知识点，本文通过实例代码给大家讲解react中常用的父子、跨组件通信的方法，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了React中引入CSS高阶用法的方案详解,至于使用react用哪种方案引入css,并没有一个绝对的答案,可以根据各自情况选择合适的方案,需要的朋友可以参考下2024-02-02
React超详细分析useState与useReducer源码
我正在处理的组件是表单的时间输入。表单相对复杂，并且是动态生成的，根据嵌套在其他数据中的数据显示不同的字段。我正在用useReducer管理表单的状态，到目前为止效果很好2022-11-11
这篇文章主要为大家介绍了React错误用法习惯分析详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
webpack在单页面打包上应用广泛，以create-react-app为首的脚手架众多。这篇文章主要介绍了webpack4+react多页面架构的实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-10-10
这篇文章主要介绍了React+EggJs实现断点续传的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了React控制元素显示隐藏的三种方法小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要介绍了react配置px转换rem的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
最新评论