使用react-native-video播放直播视频流

最新推荐文章于 2024-08-10 07:22:29 发布

勤劳@小蚂蚁

最新推荐文章于 2024-08-10 07:22:29 发布

阅读量4.1k

点赞数 2

分类专栏： react native 文章标签： react native

本文链接：https://blog.csdn.net/zcylyzhi4/article/details/110626269

版权

react native 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

最近做RN项目，需要在APP端播放直播视频流，对比过很多插件，最终选择了react-native-video，npm地址，然而在使用过程中，还是尝试了多次，才实现了播放直播流的功能。

温馨提示：如果你的react-native版本是0.5之内的，那么建议使用react-native-video的3.2.1这个版本的npm包，否则会出现很多奇怪的报错，我也是经过多次尝试，最终总结出的经验

一、安装react-native-video

npm install react-native-video@3.2.1

二、配置

1. 配置android/app/build.gradle

添加如下代码：

compile project(':react-native-video')

在这里插入图片描述

2. 配置android/settings.gradle

添加如下代码：

include ':react-native-video'
project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android-exoplayer')

在这里插入图片描述

3. 配置MainApplication.java

添加如下代码：

import com.brentvatne.react.ReactVideoPackage;

...
...

new ReactVideoPackage()

在这里插入图片描述

使用

import Video from 'react-native-video';

...
...
...

 <Video 
        ref={(c) => { this._video = c; }}
        source={{uri: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8'}}  
        onEnd={() => {}}
        resizeMode="cover"
        posterResizeMode="cover"
        onLoad={this.onLoad} 
        onError={this.onError}
        onLoadStart={this.onLoadStart}
        style={{width : '100%',height : 300 }}
    />