Flutter视频缓存播放插件video_player_cached

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

一个Flutter插件，它是从官方的video_player包分叉出来的，但增加了在Android和iOS上的缓存支持。Web插件将像官方的video_player一样工作，即不支持缓存。

安装

首先，在你的pubspec.yaml文件中添加cached_video_player作为依赖项。

请遵循官方video_player包的Android和iOS配置步骤。此插件在桌面端不可用。

问题

maxFileSize 和 maxCacheSize 在Android上分别被硬编码为100MiB和1GiB。

贡献者

示例代码

以下是使用video_player_cached_plus插件的基本示例：

import 'package:flutter/material.dart';
import 'package:video_player_cached_plus/video_player_cached_plus.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(
        // 这是您的应用程序的主题。
        //
        // 尝试运行您的应用程序并使用"flutter run"。您会看到应用程序有一个蓝色工具栏。然后，不退出应用程序，尝试将主色调更改为绿色，并调用"热重载"（在运行"flutter run"的控制台中按"r"键，或简单地保存更改以进行"热重载"）。请注意，计数器并没有重置回零；应用程序没有重新启动。
        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);

  // 这个小部件是您的应用的首页。它具有状态，意味着它包含影响其外观的字段。
  // 此类是状态的配置。它保留了由父级（在这种情况下是App小部件）提供的值（在此案例中是标题），并在构建方法中使用这些值。Widget子类中的字段总是标记为"final"。

  final String title;

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

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

  [@override](/user/override)
  void initState() {
    controller = CachedVideoPlayerController.network(
        "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4");
    controller.initialize().then((value) {
      controller.play();
      setState(() {});
    });
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 每次调用setState时都会重新运行此方法，例如通过上面的_incrementCounter方法。
    //
    // Flutter框架已被优化为快速重新运行构建方法，因此您可以只需重建需要更新的内容，而不是逐个更改小部件实例。
    return Scaffold(
      appBar: AppBar(
        // 这里我们取MyHomePage对象的值，该对象是由App.build方法创建的，并将其用于设置我们的appbar标题。
        title: Text(widget.title),
      ),
      body: Center(
          child: controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: controller.value.aspectRatio,
                  child: CachedVideoPlayer(controller))
              : const CircularProgressIndicator()), // 这个尾随逗号使自动格式化更美观。
    );
  }
}

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

phonegap100 1楼

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

当然，下面是一个关于如何使用Flutter视频缓存播放插件 video_player_cached_plus 的代码案例。这个插件结合了 video_player 和 cached_network_image 插件的功能，允许你缓存视频并在设备本地播放。

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

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

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

以下是一个完整的Flutter应用示例，展示了如何使用 video_player_cached_plus 来缓存并播放视频：

import 'package:flutter/material.dart';
import 'package:video_player_cached_plus/video_player_cached_plus.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Player Cached Plus Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: VideoPlayerScreen(),
    );
  }
}

class VideoPlayerScreen extends StatefulWidget {
  [@override](/user/override)
  _VideoPlayerScreenState createState() => _VideoPlayerScreenState();
}

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

  [@override](/user/override)
  void initState() {
    super.initState();
    // 视频URL，请替换为你的视频URL
    final String videoUrl =
        'https://www.example.com/path/to/your/video.mp4';
    _controller = VideoPlayerController.cachedNetwork(videoUrl)
      ..initialize().then((_) {
        // 确保在UI更新后设置播放状态
        setState(() {});
      });
  }

  [@override](/user/override)
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Video Player Cached Plus Demo'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: VideoPlayer(_controller),
              )
            : Container(
                child: CircularProgressIndicator(),
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.value.isPlaying
                ? _controller.pause()
                : _controller.play();
          });
        },
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

代码解释

依赖导入：

import 'package:video_player_cached_plus/video_player_cached_plus.dart';

视频控制器初始化：

late VideoPlayerController _controller;

[@override](/user/override)
void initState() {
  super.initState();
  final String videoUrl = 'https://www.example.com/path/to/your/video.mp4';
  _controller = VideoPlayerController.cachedNetwork(videoUrl)
    ..initialize().then((_) {
      setState(() {});
    });
}

UI构建：

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Video Player Cached Plus Demo'),
    ),
    body: Center(
      child: _controller.value.isInitialized
          ? AspectRatio(
              aspectRatio: _controller.value.aspectRatio,
              child: VideoPlayer(_controller),
            )
          : Container(
              child: CircularProgressIndicator(),
            ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          _controller.value.isPlaying
              ? _controller.pause()
              : _controller.play();
        });
      },
      child: Icon(
        _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
      ),
    ),
  );
}

资源释放：

[@override](/user/override)
void dispose() {
  _controller.dispose();
  super.dispose();
}

在这个示例中，我们创建了一个简单的Flutter应用，它使用 video_player_cached_plus 插件来缓存并播放一个网络视频。你可以根据需要调整视频URL和UI布局。