expo: [iOS] Video Component doesn't works when published to expo projects

Hi guys,

The background video component is working for both android/iOS when i am building locally. However, video doesnt loads when published to expo for iOS. Android is working great. Can someone please help me out?

P.S : I am loading custom fonts but i don’t think thats the problem as locally both iOS and android are working. I have handled custom fonts loading as per docs using setState. Everything works ok but when i scan published qr code the video doesnt loads on iOS.

import colorCompareLoginFootage from '../res/colorCompareLoginFootage.mp4';
.
.
.
.
inside render --->
<Video
          source={colorCompareLoginFootage}
          rate={1.0}                              // 0 is paused, 1 is normal.
          volume={1.0}                            // 0 is muted, 1 is normal.
          isMuted={true}                           // Mutes the audio entirely
          resizeMode='cover'                      // Fill the whole screen at aspect ratio.*
          shouldPlay
          isLooping                                  // Continously repeat the video
          style={{ width: Dimensions.get('window').width * 1.5, height: Dimensions.get('window').height }}
/>

Package.json file

{
  "main": "node_modules/expo/AppEntry.js",
  "private": true,
  "dependencies": {
    "expo": "^24.0.0",
    "react": "16.0.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-24.0.0.tar.gz",
    "react-native-router-flux": "^4.0.0-beta.17",
    "react-native-video": "^2.0.0"
  }
}

https://expo.io/@scoreboardtech/screencompare

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 41 (14 by maintainers)

Most upvoted comments

@lichin-lin, thanks, I downloaded both files and the diff showed no difference, so I checked the HTTP communication details — the only difference I noticed were Content-Type headers: cloudfront showed octet-stream while Google returned video/mp4. It seems in the history of AVPlayer we are not the only one who try to play application/octet-stream in AVPlayer and fail to do so.

I confirmed this behavior with a local file server. And two identical copies of the files served with different content-types.

@nikki93, do you think it would be possible for AWS to respond with a more precise Content-Type?

I got the same loading failure on ios issue when publish the expo project. this is my link of the expo project: https://expo.io/@lichin-lin/nextclinicapp

I use the way @sjchmiela provide to load the source (1 image, 1 video)

import { Asset } from 'expo';
const videoModule = require('./assets/video.mp4');
const videoAsset = Asset.fromModule(videoModule);
const videoSource = { uri: videoAsset.uri };

const catModule = require('./assets/cat.jpg');
const catAsset = Asset.fromModule(catModule);
const catSource = { uri: catAsset.uri };

...
<Text>{videoSource}</Text>
<Text>{catSource}</Text>
<Image source={catSource} />
<Video source={videoSource} />

which give the result: expo-video-error

I’ve try to change the source link directly into the really link where the server hold those file (and I check those file, I can successfully download those image and video).

...
<Text>{videoSource}</Text>
<Text>{catSource}</Text>
<Image source={{ uri:  'https://d1wp6m56sqw74a.cloudfront.net/~assets/ae413f45c86be30855810be0409042de'}} />
<Video source={{ uri:  'https://d1wp6m56sqw74a.cloudfront.net/~assets/39dcba8c1b5dc1746861295f159f221b' }} />

but end up with the same result, the video still don’t show up.

@sjchmiela i am out for few days. Give me some time. Will update ASAP

@themakerman As a workaround, I uploaded the video asset to a public accessible url (amazon s3) and refrerence via {uri:'https://xxxx'} and it works