performance - 为什么 React Native Expo 应用上的视频会有延迟？

Question

我正在 Expo / React Native 上构建一个基于视频的应用程序，播放视频时有时有时不会出现延迟。

当没有延迟时，点击屏幕会立即转到下一个视频。当有延迟时，点击屏幕会在几秒钟后进入下一个视频。

我还有一个进度条，指示视频的完成百分比（类似于 Instagram 故事）。当没有延迟时，进度条会在视频完成时完成。当有延迟时，当视频完成时，进度条通常只有 75% 完成。

这是我的应用程序的链接：https ://expo.io/@vaibhavverma9/realtalk

我试图弄清楚为什么我的应用程序有时运行如此缓慢而其他时候运行顺利。

我使用动画条作为进度条，如果这有帮助的话。

  function ProgressBarsContainer () {

    const width = progressBarWidth(); 
    return (
        <View style={homeStyles.progressBarContainer}>
          {initAnimatedBars(width)}
        </View>
    )
  }

  function initAnimatedBars(width) {
    const animatedBars = []; 

    for (let i = 0; i < currentUserVideoCount; i++){
      if(i < videoIndex){
        animatedBars.push(
          <ProgressBar
             progress={1}
             width={width}
             key={i}

             color="#734f96"
             unfilledColor="#E6E6FA"
             borderColor="#000"
             borderRadius={1}
             height={3}
            />
        )
      } else if (i == videoIndex) {
        animatedBars.push(
          <ProgressBar
            key={i}
            progress={currentProgress}
             width={width}
             color="#734f96"
             unfilledColor="#E6E6FA"
             borderColor="#000"
             borderRadius={1}
             height={3}

            />
        )
      } else {
        animatedBars.push(
          <ProgressBar
             progress={0}
             width={width}
             key={i}
             color="#734f96"
             unfilledColor="#E6E6FA"
             borderColor="#000"
             borderRadius={1}
             height={3}
            />
        )
      }
    }
    return animatedBars;
  }

我还同时渲染多个视频以提高性能。

import React, { useEffect, useRef, useState } from 'react'; 
import { Video, Audio } from 'expo-av';   
import { View, Animated } from 'react-native';

export default function MultipleVideos(props) {

    const renderedGroup = props.limit; 

    let initialIndex;
    let indexLimit;  
    if (props.first) {
        const renderedIndex = Math.round(props.userIndex / renderedGroup); 
        initialIndex = renderedIndex * renderedGroup;
        indexLimit = renderedIndex * renderedGroup + renderedGroup / 2; 
    } else {
        const renderedIndex = Math.floor(props.userIndex / renderedGroup); 
        initialIndex = renderedIndex * renderedGroup + renderedGroup / 2; 
        indexLimit = renderedIndex * renderedGroup + renderedGroup; 
    }

    useEffect(() => {
        Audio.setAudioModeAsync({
            playsInSilentModeIOS: true
        }); 
    }, []);

    const playingData = { 
        isMuted: false, 
        shouldPlay: props.shouldPlay, 
        playbackObject: props.playbackObject, 
        _onPlaybackStatusUpdate: props._onPlaybackStatusUpdate, 
        display: "flex"
    }

    const nonplayingData = {
        isMuted: true, 
        shouldPlay: false, 
        playbackObject: null, 
        _onPlaybackStatusUpdate: null, 
        display: "none"
    }

    const renderedVideos = [];

    if(props.videoData) {

        for(let i = initialIndex; i < indexLimit; i++){
            const user = props.videoData.users[i];

            if(user){
                for (let j = 0; j < user.userVideos.length; j++){
                    const muxPlaybackId = user.userVideos[j].muxPlaybackId; 
                    const muxPlaybackUrl = 'https://stream.mux.com/' + muxPlaybackId + '.m3u8';

                    if(props.userIndex == i && props.videoIndex == j){
                        renderedVideos.push(
                            <PlayingVideo
                                key={muxPlaybackId}
                                playbackObject={playingData.playbackObject}
                                source={muxPlaybackUrl}
                                isMuted={playingData.isMuted}
                                shouldPlay={playingData.shouldPlay}
                                _onPlaybackStatusUpdate={playingData._onPlaybackStatusUpdate}
                                display={playingData.display}
                            />
                        )            
                   } 
                    else {
                        renderedVideos.push(
                            <PlayingVideo
                                key={muxPlaybackId}
                                playbackObject={nonplayingData.playbackObject}
                                source={muxPlaybackUrl}
                                isMuted={nonplayingData.isMuted}
                                shouldPlay={nonplayingData.shouldPlay}
                                _onPlaybackStatusUpdate={nonplayingData._onPlaybackStatusUpdate}
                                display={nonplayingData.display}
                            />
                        )    
                    }
                }
            }

        }
        return(
            <View>
                {renderedVideos}
            </View>
        )    
    } else {
        return null; 
    }
}

function PlayingVideo({playbackObject, source, isMuted, shouldPlay, _onPlaybackStatusUpdate, display}){
    return(
        <Video
            ref={playbackObject}
            source={{uri: source}}
            // posterSource={{ uri: posterSource}}
            // posterStyle={{ width: '100%', height: '100%', display: display, flex: 1 }}
            rate={1.0}
            volume={1.0}
            isMuted={isMuted}
            resizeMode="cover"
            usePoster={true}
            shouldPlay={shouldPlay}
            onPlaybackStatusUpdate={_onPlaybackStatusUpdate}
            progressUpdateIntervalMillis={50}
            isLooping
            style={{ width: '100%', height: '100%', display: display}}
            >
        </Video>
    )
}

请让我知道是否有任何想法可能有助于提高性能。谢谢 ：）

标签： performancereact-nativevideoexpoavplayer