Flutter视频流缓存插件cached_streamable的使用

当然，以下是一个关于如何使用 cached_streamable 插件在 Flutter 中实现视频流缓存的代码案例。cached_streamable 插件允许你缓存网络视频流，以便在离线时也能播放。

首先，你需要在 pubspec.yaml 文件中添加 cached_streamable 和 chewie（一个 Flutter 视频播放器插件）的依赖：

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.1.0  # 注意：cached_streamable 依赖于 cached_network_image
  cached_streamable: ^0.1.0  # 请检查最新版本号
  chewie: ^1.2.2  # 一个流行的 Flutter 视频播放器插件
  video_player: ^2.2.15  # Flutter 视频播放器核心插件

然后运行 flutter pub get 来获取这些依赖。

接下来是代码部分：

import 'package:flutter/material.dart';
import 'package:cached_streamable/cached_streamable.dart';
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => VideoProvider()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Video Stream Cache Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: VideoPage(),
    );
  }
}

class VideoProvider with ChangeNotifier {
  late CachedStreamable _cachedStreamable;
  late VideoPlayerController _videoPlayerController;
  ChewieController? _chewieController;

  CachedStreamable get cachedStreamable => _cachedStreamable;
  VideoPlayerController get videoPlayerController => _videoPlayerController;
  ChewieController? get chewieController => _chewieController;

  Future<void> initialize(String videoUrl) async {
    _cachedStreamable = CachedStreamable(videoUrl);
    _videoPlayerController = VideoPlayerController.network(_cachedStreamable.url);

    await _videoPlayerController.initialize();
    _videoPlayerController.setLooping(true);
    _videoPlayerController.play();

    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      aspectRatio: _videoPlayerController.value.aspectRatio,
      autoPlay: false,
      looping: _videoPlayerController.value.isLooping,
    );

    notifyListeners();
  }

  void dispose() {
    _videoPlayerController.dispose();
    _chewieController?.dispose();
    _cachedStreamable.dispose();
    notifyListeners();
  }
}

class VideoPage extends StatefulWidget {
  @override
  _VideoPageState createState() => _VideoPageState();
}

class _VideoPageState extends State<VideoPage> {
  late VideoProvider _videoProvider;

  @override
  void initState() {
    super.initState();
    _videoProvider = Provider.of<VideoProvider>(context, listen: false);
    final videoUrl = 'https://www.example.com/path/to/your/video.mp4'; // 替换为你的视频URL
    _videoProvider.initialize(videoUrl);
  }

  @override
  void dispose() {
    _videoProvider.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Stream Cache Demo'),
      ),
      body: Center(
        child: _videoProvider.chewieController != null
            ? Chewie(
                controller: _videoProvider.chewieController!,
              )
            : CircularProgressIndicator(),
      ),
    );
  }
}

解释

1. 依赖注入：使用 Provider 来管理 VideoProvider 的状态。
2. 视频初始化：在 VideoProvider 中，我们初始化 CachedStreamable 和 VideoPlayerController。
3. Chewie 控制器：创建 ChewieController 来控制视频的播放。
4. UI 层：在 VideoPage 中，我们通过 Provider.of 获取 VideoProvider 的实例，并初始化视频。如果 ChewieController 不为空，则显示视频播放器，否则显示加载指示器。

注意事项

• 确保你使用的是最新版本的 cached_streamable 和其他相关依赖。
• 视频 URL 需要替换为你自己的视频 URL。
• cached_streamable 依赖于 cached_network_image 来进行缓存，因此你不需要额外配置缓存目录等，它已经为你处理好了。

这个示例展示了如何使用 cached_streamable 插件在 Flutter 中实现视频流的缓存和播放。你可以根据实际需求进一步调整和扩展这个示例。