Flutter - Streaming and Caching videos

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?

Solution 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).

Solution 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();
  }
}