react-native-video包的使用

img

img


react native 版本0.71，使用react-native-video版本5.2.1。进行了npm install react-native-video下一步pod install再下一步添加如图权限后，苹果端未能播放视频什么都不显示如图，而安卓端能正常播放，苹果端是我这个包遗漏什么操作吗？

原因一：视频源的URL不是HTTPS协议
解决方法：如果您的视频源的URL是HTTP协议，那么您需要在ios/Project-Name/info.plist文件中添加以下代码，以允许App Transport Security：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

原因二：视频格式不被ios支持
解决方法：如果您的视频格式不是MP4或者其他ios支持的格式，那么您需要转换视频格式或者使用其他的库来播放视频，例如react-native-youtube。
原因三：音频输出设备或者权限设置有问题
解决方法：如果您的视频只能播放画面而没有声音，那么您需要检查一下您的音频输出设备是否正常工作，以及您的info.plist文件中是否添加了以下代码，以获取音频播放的权限：

<key>NSMicrophoneUsageDescription</key>
<string>App needs access to microphone to play audio</string>

以下答案参考newbing,回答由博主波罗歌编写：
首先，请确保你已经按照正确的步骤完成了react-native-video的安装和配置。下面是react-native-video的使用步骤：

  1. 安装react-native-video：

    npm install react-native-video

  2. 在iOS项目中运行pod install：

    cd ios && pod install && cd ..

  3. 在iOS项目中添加访问相机和相册的权限，打开ios/[YOUR_PROJECT_NAME]/Info.plist文件，添加以下代码：

    <key>NSCameraUsageDescription</key>
<string>需要使用相机权限用于拍照或者录像</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>需要使用相册权限用于选择视频</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>需要使用相册权限用于保存视频</string>

  4. 在你的React Native组件中导入react-native-video：

    import Video from 'react-native-video';

  5. 在render函数中使用Video组件：

    render() {
  return (
    <View>
      <Video
        source={{ uri: 'https://path/to/your/video.mp4' }}
        style={{ width: 300, height: 200 }}
      />
    </View>
  );
}

确保你在source中传入了正确的视频资源路径。你可以尝试使用本地视频文件，或者使用网络上的视频链接。

如果你确认以上步骤都已经正确执行，但在iOS端仍然无法正常播放视频，可能有以下几种情况需要注意：

  1. 检查你的视频资源是否存在，并且可以在iOS设备上访问。尝试在Safari浏览器中打开视频链接，确保可以正常播放。

  2. 检查视频的格式是否受支持。react-native-video支持的视频格式包括mp4、mov、m4v等。如果你的视频采用其他格式，可能无法正常播放。

  3. 检查你的iOS设备是否具有足够的网络访问权限。如果在某些网络环境下无法正常访问视频，可以尝试使用本地视频文件进行测试。

如果你的问题仍然无法解决，请提供更多的细节和错误信息，我将尽力协助你解决问题。
如果我的回答解决了您的问题，请采纳！

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这篇博客: react-native-video 视频播放组件中的 react-native-video 视频播放组件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    1、组件描述：
    react-native-video是基于react native的一款视频播放组件。详细使用方法参考地址：
    （1）

    github 组件地址
    （2）npm 组件地址
    2、组件使用：
    （1）先安装react-native-video
    $ npm install react-native-video --save
    （2）在项目中集成react-native-video
    react-native link react-native-video
    （3）导入react-native-video
    import Video from ‘react-native-video’;
    （4）使用Video
    <Video
    ref={(ref: Video) => {
        this.video = ref
    }}
    source={{ uri: goodsDetail.video_url }}
    // style={{width:pxToDp(650),height:pxToDp(318)}}
    style={styles.fullScreen}
    // paused={true}//播放器暂停
    // posterResizeMode='cover'
    // source={require('../../assets/images/ITImgs/1.mp4')}//设置视频源  
    // style={styles.fullScreen}//组件样式
    // autoPlay={false}
    // rate={this.state.rate}//播放速率
    resizeMode='contain'//cover
    // hideShutterView={false}
    // poster={`${goodsDetail.video_url}`}
    posterResizeMode={'contain'}
    paused={this.state.paused}//暂停
    // volume={this.state.volume}//调节音量
    // muted={this.state.muted}//控制音频是否静音
    // resizeMode={this.state.resizeMode}//缩放模式
    // onLoadStart = {this.loadStart}
    // onReadyForDisplay = {this.onReadyForDisplay}
    onLoad={this.onLoad}//加载媒体并准备播放时调用的回调函数。
    // onProgress={this.onProgress}//视频播放过程中每个间隔进度单位调用的回调函数
    onEnd={this.onEnd}//视频播放结束时的回调函数
    // onAudioBecomingNoisy={this.onAudioBecomingNoisy}//音频变得嘈杂时的回调 - 应暂停视频
    // onAudioFocusChanged={this.onAudioFocusChanged}//音频焦点丢失时的回调 - 如果焦点丢失则暂停
    // repeat={true}//确定在到达结尾时是否重复播放视频。
    // loop={true}
/>
//准备好播放时调用的回调函数
onLoad = () => {
	this.video.seek(1)
}
//播放完时调用的回调函数
onEnd = () => {
	this.setState({ paused: true })
	this.video.seek(1)
};

    3、react-native-video在Android系统 下项目环境配置：
    （1）查看集成后，项目文件中有没有对应添加上图片选择模块
    [1]查看项目目录appdd\android下的settings.gradle文件中是否有react-native-video模块，一般集成后都会有，如果没有就添加上
    [2]查看项目目录appdd\android\app下的build.gradle文件中是否有react-native-video模块，一般集成后都会有，如果没有就添加上
    [3]查看项目目录appdd\android\app\src\main\java\com\itdiandian\app下的MainApplication.java文件中是否有react-native-video模块，一般集成后都会有，如果没有就添加上
    （2）如果没问题后，就可以重新运行命令react-native run-android，安装到手机即可使用
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    4、效果图：
    在这里插入图片描述

  • 以下回答来自chatgpt:

    抱歉，但您没有明确给出问题。请提供明确的问题以便我可以提供具体的解决方案。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^