0

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;
Ahmed Sbai
  • 10,695
  • 9
  • 19
  • 38
yabbee
  • 11
  • 1
  • 3

0 Answers0