Flutter视频缓存插件video_cache的使用

Flutter视频缓存插件video_cache的使用

一个强大的媒体缓存插件。

☕ 支持我

聊天群：加入微信群

📦 安装

在你的 pubspec.yaml 文件中添加 video_cache：

dependencies:
  video_cache: latest_version

在需要使用的文件中导入 video_cache：

import 'package:video_cache/video_cache.dart';

📚 使用

String url = 'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4';
url = await VideoCache().convertToCacheProxyUrl(url);

📏 关于我

• GitHub: LinXunFeng
• 邮箱: linxunfeng@yeah.net
• 博客:
  • 全栈行动: https://fullstackaction.com
  • 掘金: https://juejin.cn/user/1820446984512392

示例代码

以下是完整的示例代码，展示如何使用 video_cache 插件播放视频并实现缓存功能。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final _videoCachePlugin = VideoCache();

  late VideoPlayerController _videoPlayerController;
  ChewieController? _chewieController;

  int currentPlayIndex = 0;

  List<String> srcList = [
    "http://aliuwmp3.changba.com/userdata/video/45F6BD5E445E4C029C33DC5901307461.mp4",
    "http://aliuwmp3.changba.com/userdata/video/3B1DDE764577E0529C33DC5901307461.mp4",
    "https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4",
  ];

  [@override](/user/override)
  void initState() {
    super.initState();

    initializePlayer();
  }

  [@override](/user/override)
  void dispose() {
    _videoPlayerController.dispose();
    _chewieController?.dispose();
    super.dispose();
  }

  Future<void> initializePlayer() async {
    String url = srcList[currentPlayIndex];
    url = await _videoCachePlugin.convertToCacheProxyUrl(url);
    debugPrint('url -- $url');

    _videoPlayerController = VideoPlayerController.networkUrl(Uri.parse(url));
    await _videoPlayerController.initialize();
    _createChewieController();
    setState(() {});
  }

  void _createChewieController() {
    _chewieController = ChewieController(
      videoPlayerController: _videoPlayerController,
      autoPlay: true,
      looping: true,
      additionalOptions: (context) {
        return <OptionItem>[
          OptionItem(
            onTap: toggleVideo,
            iconData: Icons.live_tv_sharp,
            title: '切换视频源',
          ),
        ];
      },
    );
  }

  Future<void> toggleVideo() async {
    await _videoPlayerController.pause();
    currentPlayIndex += 1;
    if (currentPlayIndex >= srcList.length) {
      currentPlayIndex = 0;
    }
    await initializePlayer();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Cache',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('视频缓存Demo'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: Center(
                child: _chewieController != null &&
                        _chewieController!.videoPlayerController.value.isInitialized
                    ? Chewie(controller: _chewieController!)
                    : const Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          CircularProgressIndicator(),
                          SizedBox(height: 20),
                          Text('加载中'),
                        ],
                      ),
              ),
            ),
            TextButton(
              onPressed: () {
                _chewieController?.enterFullScreen();
              },
              child: const Text('全屏'),
            ),
          ],
        ),
      ),
    );
  }
}