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

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

cached_video_player_m3_exo 是 cached_video_player_plus 的一个修改版本，它使用了较新的 ExoPlayer 和所有相关的依赖项。

示例代码

example/lib/main.dart

// Flutter Packages
import 'package:flutter/material.dart';

// This Package
import 'package:cached_video_player_m3_exo/cached_video_player_m3_exo.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cached Video Player Plus Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Cached Video Player Plus Example'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  @override
  void initState() {
    super.initState();
    // 初始化视频控制器
    controller = CachedVideoPlayerM3ExoController.networkUrl(
      Uri.parse(
        'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
      ),
      httpHeaders: {
        'Connection': 'keep-alive',
      },
      // 如果缓存文件超过10分钟，则重新验证缓存
      invalidateCacheIfOlderThan: const Duration(minutes: 10),
    )..initialize().then((value) async {
        // 设置循环播放
        await controller.setLooping(true);
        // 播放视频
        controller.play();
        setState(() {});
      });
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: controller.value.aspectRatio,
                // 显示视频
                child: CachedVideoPlayerM3Exo(controller),
              )
            : const CircularProgressIndicator(), // 加载指示器
      ),
    );
  }
}

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

1 回复

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


cached_video_player_m3_exo 是一个基于 ExoPlayer 的 Flutter 插件，用于在 Flutter 应用中播放视频，并支持视频缓存功能。这个插件是 cached_video_player 的一个扩展版本，提供了更多的功能和灵活性。

安装插件

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

dependencies:
  cached_video_player_m3_exo: ^1.0.0  # 请检查最新版本

然后运行 flutter pub get 来安装插件。

基本使用

  1. 导入包：
import 'package:cached_video_player_m3_exo/cached_video_player_m3_exo.dart';
  1. 初始化视频播放器：

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

CachedVideoPlayerController _controller;

@override
void initState() {
  super.initState();
  _controller = CachedVideoPlayerController.network(
    'https://www.example.com/sample.mp4',
  )..initialize().then((_) {
      setState(() {});
    });
}
  1. 播放视频：

你可以使用 CachedVideoPlayer 小部件来显示视频。

@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),
            )
          : CircularProgressIndicator(),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: () {
        setState(() {
          _controller.value.isPlaying
              ? _controller.pause()
              : _controller.play();
        });
      },
      child: Icon(
        _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
      ),
    ),
  );
}
  1. 控制视频播放：

你可以通过 _controller 来控制视频的播放、暂停、跳转等操作。

_controller.play();  // 播放视频
_controller.pause(); // 暂停视频
_controller.seekTo(Duration(seconds: 10));  // 跳转到指定时间
  1. 释放资源：

在页面销毁时，记得释放视频播放器的资源。

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

缓存配置

cached_video_player_m3_exo 支持配置缓存大小和缓存目录。你可以在初始化 CachedVideoPlayerController 时进行配置。

_controller = CachedVideoPlayerController.network(
  'https://www.example.com/sample.mp4',
  cacheConfig: CacheConfig(
    maxCacheSize: 100 * 1024 * 1024,  // 最大缓存大小，单位是字节
    maxFileSize: 10 * 1024 * 1024,    // 单个文件的最大大小，单位是字节
    cacheDirectory: 'video_cache',    // 缓存目录名称
  ),
);

其他功能

  • 监听播放状态：你可以监听视频的播放状态、缓冲状态等。
_controller.addListener(() {
  if (_controller.value.isPlaying) {
    // 视频正在播放
  } else if (_controller.value.isBuffering) {
    // 视频正在缓冲
  }
});
  • 设置播放速度：你可以设置视频的播放速度。
_controller.setPlaybackSpeed(1.5);  // 1.5倍速播放
回到顶部