Flutter视频缓存播放插件cached_video_player_fork的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter视频缓存播放插件cached_video_player_fork的使用

介绍

cached_video_player_fork 是一个从官方 video_player 插件分叉出来的Flutter插件，它在Android和iOS上支持视频缓存功能。Web平台上的插件行为与官方 video_player 插件相同，即不支持缓存。

分叉的原因

  1. 原作者停止更新/合并PR，因此重新发布。
  2. ExoPlayer 2.12版本被下架，导致构建失败。更新到ExoPlayer 2.18.1版本以解决此问题。
  3. 移除了弃用的API，并修复了错误。
  4. 参考 video_player 插件的实现进行了优化。

安装

  1. 在 pubspec.yaml 文件中添加 cached_video_player 作为依赖项。
  2. 按照官方 video_player 插件的说明进行Android和iOS的配置。请注意，该插件不支持桌面平台。

注意事项

  • 在Android平台上，maxFileSize 和 maxCacheSize 的默认值分别为100MiB和1GiB，且这些值是硬编码的。

示例代码

以下是一个完整的示例demo，展示了如何使用 cached_video_player_fork 插件来播放和缓存网络视频。

import 'package:flutter/material.dart';
import 'package:cached_video_player_fork/cached_video_player.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue, // 设置应用的主题颜色
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late CachedVideoPlayerController controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 创建一个网络视频控制器
    controller = CachedVideoPlayerController.network(
      "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
    );
    // 初始化控制器并开始播放
    controller.initialize().then((value) {
      controller.play();
      setState(() {});
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 设置App Bar的标题
      ),
      body: Center(
        child: controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: controller.value.aspectRatio, // 根据视频的宽高比调整显示比例
                child: CachedVideoPlayer(controller), // 显示缓存视频播放器
              )
            : const CircularProgressIndicator(), // 如果视频未初始化，显示加载指示器
      ),
    );
  }

  [@override](/user/override)
  void dispose() {
    // 释放资源
    controller.dispose();
    super.dispose();
  }
}

更多关于Flutter视频缓存播放插件cached_video_player_fork的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter视频缓存播放插件cached_video_player_fork的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用cached_video_player_fork插件来实现视频缓存和播放的示例代码。cached_video_player_fork是一个基于cached_network_image和video_player插件的派生插件，用于缓存视频并在设备本地播放。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加cached_video_player_fork依赖：

dependencies:
  flutter:
    sdk: flutter
  cached_video_player_fork: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

2. 导入插件

在你的Dart文件中导入插件：

import 'package:cached_video_player_fork/cached_video_player.dart';
import 'package:flutter/material.dart';

3. 创建视频播放器组件

接下来，创建一个组件来使用CachedVideoPlayer。

class VideoPlayerScreen extends StatefulWidget {
  @override
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late CachedVideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = CachedVideoPlayerController.network(
      'https://www.example.com/path/to/your/video.mp4',
      autoPlay: false,
      cachingConfiguration: CachingConfiguration(
        useMemoryCache: true,
        maxCacheSize: 1024 * 1024 * 100, // 100 MB
        maxDurationToUseCache: Duration(days: 7),
      ),
    );

    // Initialize the controller
    _initializeController();
    _controller.addListener(() {
      if (_controller.value.initialized) {
        setState(() {});
      }
    });
  }

  Future<void> _initializeController() async {
    await _controller.initialize();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player with Caching'),
      ),
      body: Center(
        child: _controller.value.initialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: CachedVideoPlayer(_controller),
              )
            : Container(),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

4. 使用视频播放器组件

最后，在你的主应用或任何需要的页面中使用这个视频播放器组件：

void main() {
  runApp(MaterialApp(
    home: VideoPlayerScreen(),
  ));
}

总结

上述代码展示了如何在Flutter项目中使用cached_video_player_fork插件来缓存和播放网络视频。请确保将视频URL替换为你自己的视频链接，并根据需要调整缓存配置。插件会自动处理视频的下载和缓存，并在设备本地存储，以便下次播放时可以从缓存中加载视频，从而提高性能和用户体验。

回到顶部