Forked from https://github.com/zhigang1992/react-native-video-cache
Boost performance on online video loading and caching
Use following libraries to do the heavy lifting.
- iOS: https://github.com/ChangbaDevs/KTVHTTPCache
- Android: https://github.com/danikula/AndroidVideoCache
$ yarn add @vino4all/react-native-video-cache
$ react-native link @vino4all/react-native-video-cache
import convertToProxyURL from '@vino4all/react-native-video-cache';
...
<Video source={{uri: convertToProxyURL(originalURL)}} />
Add this java file to the main application <project-root>/android/src/main/java/<package>/MyFileNameGenerator.java
package com.videocacheproject;
import android.net.Uri;
import com.danikula.videocache.file.FileNameGenerator;
public class MyFileNameGenerator implements FileNameGenerator {
// Url may contain mutable parts (parameter 'sessionToken') and stable video's id (parameter 'videoId').
// e. g. http://example.com/videos/123?videoId=abcqaz&sessionToken=xyz987
public String generate(String url) {
Uri uri = Uri.parse(url);
String[] segments = uri.getPath().split("/");
String pathName = segments[segments.length-1]; // 123
String videoId = uri.getQueryParameter("videoId"); // abcqaz
return pathName+"_"+videoId + ".mp4"; // Add your own implementation
}
}
import convertToProxyURL, {setConfig} from '@vino4all/react-native-video-cache';
...
const maxCacheSize = 1024 * 1024 * 1024; // 1GB
const fileNameGeneratorClassName =
'com.videocacheproject.MyFileNameGenerator';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};
setConfig({fileNameGeneratorClassName, maxCacheSize});
...
<Video source={{uri: convertToProxyURL(originalURL)}} />
Add this dependency to the dependencies
section of app/build.gradle
file.
implementation 'com.danikula:videocache:2.7.1'
Check https://github.com/danikula/AndroidVideoCache for the latest version