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

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

pub package

一个用于在Flutter应用中通过Widget表面播放视频的插件。

安装

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

dependencies:
  cache_video_player: ^最新版本号

Android

确保在你的Android Manifest文件中包含以下权限。该文件位于<项目根目录>/android/app/src/main/AndroidManifest.xml：

<uses-permission android:name="android.permission.INTERNET"/>

默认情况下，Flutter项目模板会添加此权限，因此它可能已经存在。

支持的格式

在Android上，底层播放器为ExoPlayer，请参阅这里了解支持的格式列表。

示例

以下是使用cache_video_player播放网络视频的示例代码：

import 'package:cache_video_player/cache_video_player.dart'; // 引入插件
import 'package:flutter/material.dart';

void main() => runApp(VideoApp());

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

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 初始化视频控制器
    _controller = VideoPlayerController.network(
        'https://flutter.github.io/assets-for-api-docs/assets/videos/bee.mp4') // 网络视频URL
      ..initialize().then((_) {
        // 确保视频初始化后显示第一帧
        setState(() {});
      });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.isInitialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio, // 保持视频原始比例
                  child: VideoPlayer(_controller), // 显示视频
                )
              : Container(), // 视频未初始化时显示空容器
        ),
        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() {
    super.dispose();
    _controller.dispose(); // 释放资源
  }
}

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

1 回复

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


cache_video_player 是一个用于在 Flutter 应用中缓存和播放视频的插件。它基于 video_player 插件，但增加了视频缓存的功能，以减少网络请求并提高播放体验。以下是如何使用 cache_video_player 插件的详细步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  cache_video_player: ^1.0.0  # 请检查最新版本

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

2. 导入包

在需要使用 cache_video_player 的 Dart 文件中导入包：

import 'package:cache_video_player/cache_video_player.dart';

3. 初始化视频播放器

你可以使用 CacheVideoPlayerController 来初始化视频播放器，并指定视频的 URL。

class VideoPlayerWidget extends StatefulWidget {
  final String videoUrl;

  const VideoPlayerWidget({Key? key, required this.videoUrl}) : super(key: key);

  @override
  _VideoPlayerWidgetState createState() => _VideoPlayerWidgetState();
}

class _VideoPlayerWidgetState extends State<VideoPlayerWidget> {
  late CacheVideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = CacheVideoPlayerController.network(widget.videoUrl)
      ..initialize().then((_) {
        // 确保视频播放器初始化完成后刷新界面
        setState(() {});
      });
  }

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

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

4. 使用视频播放器

在你的应用中使用 VideoPlayerWidget，并传入视频的 URL：

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoPlayerWidget(
        videoUrl: 'https://www.example.com/sample.mp4',
      ),
    );
  }
}

5. 配置缓存路径（可选）

你可以通过设置 CacheVideoPlayerController 的 cacheDirectory 属性来指定缓存路径：

_controller = CacheVideoPlayerController.network(
  widget.videoUrl,
  cacheDirectory: await getTemporaryDirectory(), // 使用临时目录
)..initialize().then((_) {
    setState(() {});
  });

6. 其他功能

CacheVideoPlayerController 还提供了其他功能，如设置音量、循环播放、监听播放状态等。你可以参考 video_player 插件的文档来使用这些功能。

7. 清理缓存

你可以通过以下代码手动清理缓存：

await CacheVideoPlayerController.clearCache();
回到顶部