如何为后台播放的react-native-video添加锁屏控制功能？

一、手动实现锁屏控制 #

iOS 和 Android 均需原生层配合配置事件监听，再与 React Native 端的视频播放器联动：

iOS 实现步骤 #

1. 开启后台音频权限：在Info.plist中添加UIBackgroundModes数组，包含audio字符串，确保APP后台可持续播放音频。
2. 配置锁屏显示信息：视频开始播放时，通过原生代码设置MPNowPlayingInfoCenter，填充标题、播放时长、当前进度等信息，同时开启远程控制事件监听：

   #import <MediaPlayer/MediaPlayer.h>
   
   // 更新锁屏播放信息
   MPNowPlayingInfoCenter *center = [MPNowPlayingInfoCenter defaultCenter];
   NSMutableDictionary *info = [NSMutableDictionary dictionary];
   info[MPMediaItemPropertyTitle] = @"你的视频标题";
   info[MPMediaItemPropertyArtist] = @"内容提供者";
   info[MPNowPlayingInfoPropertyElapsedPlaybackTime] = @(currentPlaybackTime);
   info[MPMediaItemPropertyPlaybackDuration] = @(videoDuration);
   info[MPNowPlayingInfoPropertyPlaybackRate] = @(isPlaying ? 1 : 0);
   center.nowPlayingInfo = info;
   
   // 开启远程控制事件接收
   [[UIApplication sharedApplication] beginReceivingRemoteControlEvents];
   

3. 处理控制事件：在AppDelegate.m中实现remoteControlReceivedWithEvent方法，将播放、暂停、进度拖动等事件传递给 React Native 端，触发react-native-video对应的操作。

Android 实现步骤 #

1. 配置权限与后台模式：在AndroidManifest.xml中添加必要权限：

   <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
   <uses-permission android:name="android.permission.WAKE_LOCK" />
   

   同时在主Activity标签中添加android:foregroundServiceType="mediaPlayback"，避免后台播放时被系统回收。
2. 初始化MediaSession：创建MediaSessionCompat实例，设置播放状态、元数据并监听控制回调：

   import android.support.v4.media.session.MediaSessionCompat;
   import android.support.v4.media.session.PlaybackStateCompat;
   import android.support.v4.media.MediaMetadataCompat;
   
   // 初始化MediaSession
   MediaSessionCompat mediaSession = new MediaSessionCompat(getApplicationContext(), "VideoPlayerSession");
   mediaSession.setFlags(MediaSessionCompat.FLAG_HANDLES_MEDIA_BUTTONS | MediaSessionCompat.FLAG_HANDLES_TRANSPORT_CONTROLS);
   mediaSession.setActive(true);
   
   // 更新播放状态
   PlaybackStateCompat state = new PlaybackStateCompat.Builder()
       .setState(isPlaying ? PlaybackStateCompat.STATE_PLAYING : PlaybackStateCompat.STATE_PAUSED, currentPlaybackTime, 1.0f)
       .setActions(PlaybackStateCompat.ACTION_PLAY | PlaybackStateCompat.ACTION_PAUSE | PlaybackStateCompat.ACTION_SEEK_TO)
       .build();
   mediaSession.setPlaybackState(state);
   
   // 设置锁屏显示的元数据
   MediaMetadataCompat metadata = new MediaMetadataCompat.Builder()
       .putString(MediaMetadataCompat.METADATA_KEY_TITLE, "你的视频标题")
       .putString(MediaMetadataCompat.METADATA_KEY_ARTIST, "内容提供者")
       .putLong(MediaMetadataCompat.METADATA_KEY_DURATION, videoDuration)
       .build();
   mediaSession.setMetadata(metadata);
   

3. 联动播放器：监听视频播放状态变化，同步更新MediaSession状态；在MediaSession的回调中，调用React Native端的播放/暂停/进度跳转方法。

React Native 层整合 #

• 在react-native-video的onLoad、onPlay、onPause、onProgress等回调中，通过NativeModules调用原生方法更新锁屏信息。
• 注册原生事件监听，接收锁屏控制指令，触发播放器对应的play()、pause()、seek()操作。

二、react-native-video分支与第三方支持 #

官方react-native-video库未集成锁屏控制功能，但有两种可行方案：

• 第三方封装库（如react-native-video-controls）内置了锁屏控制逻辑，需注意与你使用的react-native-video版本兼容性。
• 若需完全自定义，直接fork官方库并添加上述原生层逻辑，是更灵活的选择，可完全匹配业务需求。

内容的提问来源于stack exchange，提问作者Joseito Fernandes