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

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

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

flutter_cached_video_player 是一个从官方 video_player 插件衍生出来的 Flutter 插件，它支持在 Android 和 iOS 平台上进行视频缓存。Web 插件将像官方 video_player 一样工作，即不支持缓存。

安装

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

dependencies:
  cached_video_player: ^x.x.x

接着，按照官方 video_player 插件的 Android 和 iOS 配置步骤进行配置。该插件在桌面端不可用。

问题

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

贡献者

示例代码

以下是使用 flutter_cached_video_player 的完整示例代码：

import 'package:flutter/material.dart';
import 'package:cached_video_player/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() {
    // 初始化视频控制器并加载网络视频
    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 方法创建，并用于设置我们的应用栏标题。
        title: Text(widget.title),
      ),
      body: Center(
        child: controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: controller.value.aspectRatio,
                child: CachedVideoPlayer(controller))
            : const CircularProgressIndicator(), // 这个逗号使自动格式化更好看。
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何使用flutter_cached_video_player插件的示例代码，该插件用于在Flutter应用中实现视频缓存和播放功能。

首先，确保你已经在pubspec.yaml文件中添加了flutter_cached_video_player依赖：

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

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

接下来，你可以在你的Flutter应用中使用该插件。以下是一个完整的示例代码：

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

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

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

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

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

  @override
  void initState() {
    super.initState();
    // 视频URL，请替换为你的视频URL
    final String videoUrl = 'https://www.example.com/path/to/your/video.mp4';
    _controller = CachedVideoPlayerController.network(videoUrl);
    // 初始化控制器并预加载视频
    _controller!.initialize().then((_) {
      // 设置视频在初始化完成后自动播放
      setState(() {});
      _controller!.play();
    });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cached Video Player Example'),
      ),
      body: Center(
        child: _controller!.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller!.value.aspectRatio,
                child: CachedVideoPlayer(_controller!),
              )
            : Container(
                child: CircularProgressIndicator(),
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 切换播放/暂停状态
          setState(() {
            if (_controller!.value.isPlaying) {
              _controller!.pause();
            } else {
              _controller!.play();
            }
          });
        },
        child: Icon(
          _controller!.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

解释

  1. 依赖添加：在pubspec.yaml中添加flutter_cached_video_player依赖。
  2. 初始化控制器：在initState方法中初始化CachedVideoPlayerController，并传入视频的网络URL。
  3. 视频初始化：调用initialize()方法来初始化视频控制器，并在初始化完成后自动播放视频。
  4. UI构建：使用AspectRatio和CachedVideoPlayer来构建视频播放器，并在视频未初始化完成时显示一个加载指示器。
  5. 播放控制：添加一个浮动操作按钮来切换视频的播放/暂停状态。

这个示例代码展示了如何使用flutter_cached_video_player插件来实现视频的缓存和播放功能。你可以根据实际需求进一步自定义和扩展这个示例。

回到顶部