Flutter - Streaming and Caching videos - caching

Question

I'm developing an application in flutter which is showing videos in a list (like Instagram). Videos must be streamed so I can't download them first and then play them.
I want to cache them while they are being streamed. I've seen CacheManager class but it will download the whole file and then pass it to video player to play it.
How can I implement a cache manager to show the video file while it is being downloaded to cache folder?

Answer 1

I might be writing this a bit late but just in case anybody looking for a solution soon.
By the moment the official video_player plugin doesn't support video caching over network yet.
But fortunately, there been some attempts by contributors to add caching feature to the video_player plugin
You can track updates and find another PRs here: https://github.com/flutter/flutter/issues/28094
Replace video_player in your pubspec.yaml with
video_player:
git:
url: https://github.com/sanekyy/plugins.git
ref: caching
path: packages/video_player/video_player
In case of you are using chewie or other libraries that depend on video_player plugin add:
dependency_overrides:
video_player:
git:
url: https://github.com/sanekyy/plugins.git
ref: caching
path: packages/video_player/video_player
And now to cache the video pass useCache : true to
_videoPlayerController = VideoPlayerController.network(videoURL, useCache: true);
By default both maxFileSize and maxCacheSize is set to 10 * 1024 * 1024 bytes.
To adjust the cache size:
VideoPlayerController.setCacheSize(100 * 1024 * 1024, 200 * 1024 * 1024);
Another Solution:
Is to stream the video normally using the official plugin and to cache the video file using flutter_cache_manager simultaneously.
But this will lead to fetch the video twice the first time (Once for streaming through the video_player, Another for downloading the video through the cachemanager)
Here how the scenario would goes:
1- Check with flutter_cache_manager if the video_url is already downloaded and cached.
2- if the video is cached, pass the file path to video_player VideoPlayerController.file(path), if not download the file using cachemanager and stream the video using VideoPlayerController.network(videoURL) (at this moment video is being fetched twice... by videoplayer and cachemanager).

Answer 2

Visit https://github.com/elgsylvain85/cachedflickvideoplayer.git
It is a video player for flutter. It combines both: The flick_video_player plugin for the base architecture, own set of UI and The cached_video_player plugin for cache supporting.
In your pubspec.yaml file :
cachedflickvideoplayer:
git:
url: https://github.com/elgsylvain85/cachedflickvideoplayer.git
a demo of code :
import 'package:cached_video_player/cached_video_player.dart';
import 'package:cachedflickvideoplayer/cachedflickvideoplayer.dart';
import 'package:cachedflickvideoplayer/controls/flick_landscape_controls.dart';
import 'package:cachedflickvideoplayer/controls/flick_video_with_controls.dart';
import 'package:cachedflickvideoplayer/manager/flick_manager.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class ViewPage extends StatefulWidget {
FlickManager flickManager;
ViewPage() {
flickManager = initVideo();
}
#override
_ViewPageState createState() => _ViewPageState();
FlickManager initVideo() {
return FlickManager(
cachedVideoPlayerController:
CachedVideoPlayerController.network('https://media.istockphoto.com/videos/blurred-motion-of-people-in-restaurant-blur-background-video-id1190840021'),
);
}
}
class _ViewPageState extends State<ViewPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: <Widget>[
Card(
margin: const EdgeInsets.fromLTRB(20, 20, 20, 100),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
padding: const EdgeInsets.all(8),
height: 300,
child: FlickVideoPlayer(
flickManager: widget.flickManager,
flickVideoWithControlsFullscreen:
FlickVideoWithControls(
videoFit: BoxFit.contain,
controls: FlickLandscapeControls(),
),
)),,
]),
),
],
));
}
#override
void dispose() {
super.dispose();
widget.flickManager.dispose();
}
}

Answer 3

You can mix video_player with flutter_cache_manager.
/// Get a file from the cache or download and insert it into the memory.
final url = 'link-to-the-file';
final file = await DefaultCacheManager().getSingleFile(url, key: url);
_videoController = VideoPlayerController.file(file)
..initialize().then(
(_) => initialize(),
);
As the result, if the manager does not find a file in the cache by url, it will download it, insert it into the memory and return the file object.
This solution is only effective if you work with small sizes video.