I'm working on react native expo project and using expo-av to play video.I'm experimenting on my iphone and it's working almost fine. I copy and paste the sample code on expo av doc and Big Buck Bunny video is loaded successfully and able to play. But, there is a video that can't be played on my app. I have a video which is stored on s3 server. This is the mp4 video made by ffmpeg command on my computer and manually uploaded it on s3. I can download it and play on my machine. But when I try to load that video on my expo app, the video doesn't show up on the component at all. I write video source correctly including https:// but doesn't show up anything. How can i solve this problem? I'm using expo 48.0.0 , expo-av 13.2.1 and expo-dev-client 2.1.5 now.
Here is the ffmpeg code that I've used to make video. As you can see, I'm making a retro video by overlaying grain effect mp4 video which I downloaded.
ffmpeg -i /Users/yosuke/Desktop/ffmpeg_playground/effects/grainAndFlash.mp4 -i
{inputFilePath} -filter_complex "[0:a][1:a]amerge[mixedAudio];
[0]format=rgba,colorchannelmixer=aa=0.25[fg];[1][fg]overlay[out];
[out]trim=0:32,setpts=PTS-STARTPTS[video]" -map "[video]" -map "[mixedAudio]" -
pix_fmt yuv420p -c:v libx264 -crf 18 -shortest {outputFilePath}
Here is the Expo app code
import React, { useState, useEffect, useContext, useRef } from 'react';
import { View, Text, ScrollView, TouchableOpacity, Dimensions } from 'react-native';
const Container = () => {
const vidRef = useRef(null);
return (
<ScrollView style={{ flex: 1 }}>
<Video
ref={vidRef}
style={{ width: 108, height: 192, borderRadius: 7 }}
source={{
uri: 'awsvideosourceurl'
}}
useNativeControls
resizeMode='stretch'
isLooping
/>
</ScrollView>
);
};
export default Container;