React Native JW Player iOS直播视频backgroundAudioEnabled升级后失效

排查步骤与解决方案 #

1. 确认iOS项目后台模式配置 #

版本升级后可能导致权限配置丢失，需重新开启后台音频权限：

• 打开iOS项目的Info.plist，添加UIBackgroundModes数组并包含audio项；
• 或在Xcode项目设置 > Signing & Capabilities > Background Modes中，勾选Audio, AirPlay, and Picture in Picture。

2. 调整backgroundAudioEnabled配置层级 #

新版本可能对配置优先级做了调整，建议仅在全局config中设置该属性，移除playlist项内的重复配置：

<ViewportAwareJWPlayer
    innerRef={(ref) => (jWPlayerRef = ref)}
    style={Style.videoContainer}
    config={{
        license: Platform.select({
            ios: "...",
            android: "...",
        }),
        autostart: true,
        controls:true,
        playlist: [
            {
                mediaId: "0",
                image: WatchVideoData.thumbnail_file,
                time: 0,
                file: WatchVideoData.video_url,
                autostart: false,
                repeat: false,
                displayDescription: false,
                displaytitle: false,
                fullScreenOnLandscape:true,
                landscapeOnFullScreen:true,
            },
        ],
        hideUIGroups: ['casting_menu'],
        backgroundAudioEnabled: true, // 仅保留全局配置
        fullScreenOnLandscape:true,
        landscapeOnFullScreen:true,
        styling: {
            colors: {},
        },
        pipEnabled: (platform == 'android') ?  false : true,
    }}
    onViewportLeave={() => {
        jWPlayerRef.pause();
    }}
/>

3. 修正后台触发的暂停逻辑 #

onViewportLeave回调可能在App进入后台时被触发，导致音频意外暂停。可增加App状态判断，仅在前台时执行暂停：

import { AppState } from 'react-native';

// 组件内维护App状态
const [appState, setAppState] = useState(AppState.currentState);

useEffect(() => {
    const subscription = AppState.addEventListener('change', nextAppState => {
        setAppState(nextAppState);
    });
    return () => subscription.remove();
}, []);

// 修改暂停逻辑
onViewportLeave={() => {
    if (appState === 'active') {
        jWPlayerRef.pause();
    }
}}

4. 核对版本变更日志 #

查看JW Player React Native SDK 0.2.36/0.2.37的更新记录，确认是否有backgroundAudioEnabled相关的API变更或已知bug，必要时向官方提交问题反馈。

内容的提问来源于stack exchange，提问作者Digen Kanani