We cannot make react-native-video player to play a video from a API file service

Bug

Postman or android devices play it nicely, but on iOS platform we are facing the problem. Basically, a user logs in the application and makes a call to API service which returns the mp4 video.Postman header info is also attached. Any help is appreciated.

<Video
            source={{
              uri: "https://api.xxxx.org/v1/files/7afbd0c3-ab0e-4cfb-910a-10c058a07b20"
            }}
            // Can be a URL or a local file.
            controls={true}
            fullscreen={true}
            resizeMode="contain"
            ref={(ref) => {
              this.player = ref
            }}    
/>

Platform

• iOS

[mattgle]

Hi guys I’ve found a workaround, this might not work for everyone but still I’m posting it for the ones that need this urgent.

The thing is that like @Sanglepp said “Seems that iOS doesn’t play videos that have Content-Dispositon: “attachment” header.” so I decided to download the file locally and then pass that local video to the <Video/> component.

This approach worked for my because I have small videos on repeat (like “gifs”) so I didn’t have any problems downloading those videos and then showing them.

I’ve created a hook using rn-fetch-blob that downloads the video and returns the path where is located.

import { useEffect, useState } from 'react';
import RNFetchBlob from 'rn-fetch-blob';

function useFileDownload(uri) {
  const [path, setPath] = useState(null);
  useEffect(() => {
    RNFetchBlob.config({
      fileCache: true,
      appendExt: 'mp4',
    })
      .fetch('GET', uri)
      .then(res => {
        setPath(res.path());
      });
  }, []);

  if (path) {
    return path;
  }
}

export default useFileDownload;

and then I call that hook to get the working uri like this:

  const newUrl = useFileDownload(url);
  ...
        <Video
        repeat
        onLoad={hideSpinner}
        resizeMode="cover"
        source={{ uri: newUrl }}
        style={{ ...styles.image, height: 165, width: 165 }}
      />

[TalMars]

If you are using nestjs try this code

async downloadFile(id: string, request: RequestExpress, response: ResponseExpress) {
    const getContentDisposition = require('content-disposition');
    const mime = require('mime-types');
    const doc = await this.get(id);
    const file = await FileHelper.getFile(doc.path);
    const videoRange = request.headers.range;
    const contentDisposition: string = getContentDisposition(doc.name);
    const contentType = mime.contentType(doc.name);
    const path = DocumentHelper.fullPath(doc.path);
    if (videoRange) {
      const stat = statSync(path);
      const fileSize = stat.size;
      const parts = videoRange.replace(/bytes=/, '').split('-');
      const start = parseInt(parts[0], 10);
      const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
      const chunksize = end - start + 1;
      const readstream = createReadStream(path, { start, end });
      const head = {
        'Content-Range': 'bytes ${start}-${end}/${fileSize}',
        'Accept-Ranges': 'bytes',
        'Content-Length': chunksize,
        'Content-Type': 'video/mp4',
      };
      response.status(206);
      response.set(head);
      return new StreamableFile(readstream);
    } else {
      const readstream = createReadStream(DocumentHelper.fullPath(doc.path));
      // response.status(200);
      response.set({
        'Accept-Range': 'bytes',
        'Content-Type': contentType,
        'Content-Length': file.length,
        'Content-Disposition': contentDisposition,
      });
      return new StreamableFile(readstream);
    }
  }