Sometimes video doesn't play but audio of video plays

[vaibhavverma9]

Please provide the following:

1. SDK Version: 39
2. Platforms(Android/iOS/web/all): iOS

I’m running into an issue where sometimes, the audio of a video plays but the video remains blank.

This error comes when a page loads for the first time. When I move onto the next video, the next video plays along with its audio.

When I go “back” to the initial video, the initial video plays. It no longer has a blank, so I think it is a loading issue when the component initializes for the first time.

This is how I render my videos:

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

export default function MultipleVideos(props) {

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

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

    useEffect(() => {
        Audio.setAudioModeAsync({
            playsInSilentModeIOS: true
        }); 
    }, []);    
    
    const renderedVideos = [];
    const videoData = props.videoData; 
    const renderedUserIndex = props.renderedUserIndex; 
    const userIndex = props.userIndex; 
    const videoIndex = props.videoIndex;
    const userCount = props.userCount;

    if(videoData) {
        const user = useMemo(() => videoData[renderedUserIndex], [renderedUserIndex, videoData]);

        if(user) {
            const videoCount = user.userVideos.length; 
            if(userIndex == renderedUserIndex){
                const renderedVideoIndexA = videoIndex; 

                let muxPlaybackUrlA = ''; 
                
                if(videoIndex < videoCount){
                    const muxPlaybackIdA = user.userVideos[renderedVideoIndexA].muxPlaybackId; 
                    muxPlaybackUrlA = 'https://stream.mux.com/' + muxPlaybackIdA + '.m3u8';    
                }

                renderedVideos.push(
                    <PlayingVideo
                        key={renderedVideoIndexA}
                        playbackObject={playingData.playbackObject}
                        source={muxPlaybackUrlA}
                        isMuted={playingData.isMuted}
                        shouldPlay={playingData.shouldPlay}
                        _onPlaybackStatusUpdate={playingData._onPlaybackStatusUpdate}
                        display={playingData.display}
                    />
                )

                const renderedVideoIndexB = videoIndex + 1; 

                if(renderedVideoIndexB < videoCount){
                    const muxPlaybackIdB = user.userVideos[renderedVideoIndexB].muxPlaybackId; 
                    const muxPlaybackUrlB = 'https://stream.mux.com/' + muxPlaybackIdB + '.m3u8';
    
                    renderedVideos.push(
                        <PlayingVideo
                            key={renderedVideoIndexB}
                            playbackObject={nonplayingData.playbackObject}
                            source={muxPlaybackUrlB}
                            isMuted={nonplayingData.isMuted}
                            shouldPlay={nonplayingData.shouldPlay}
                            _onPlaybackStatusUpdate={nonplayingData._onPlaybackStatusUpdate}
                            display={nonplayingData.display}
                        />
                    )
                }

            } else if(renderedUserIndex < userCount) {
                const renderedVideoIndex = 0; 
                const muxPlaybackId = user.userVideos[renderedVideoIndex].muxPlaybackId; 
                const muxPlaybackUrl = 'https://stream.mux.com/' + muxPlaybackId + '.m3u8';

                renderedVideos.push(
                    <PlayingVideo
                        key={renderedVideoIndex}
                        playbackObject={nonplayingData.playbackObject}
                        source={muxPlaybackUrl}
                        isMuted={nonplayingData.isMuted}
                        shouldPlay={nonplayingData.shouldPlay}
                        _onPlaybackStatusUpdate={nonplayingData._onPlaybackStatusUpdate}
                        display={nonplayingData.display}
                    />
                )

            }
        }
    }

    return(
        <View>
            {renderedVideos}
        </View>
    )    
}

function PlayingVideo({playbackObject, source, isMuted, shouldPlay, _onPlaybackStatusUpdate, display}){

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

I use mux.com for my video infastructure.