Flutter视频播放器插件river_player_ff的使用

Flutter视频播放器插件river_player_ff的使用

变更记录

修复：

  • 迁移到AndroidX Media3
  • 更新依赖项 jhomlala/betterplayer#1291
  • 将Gradle Wrapper版本更改为v7.5
  • 将Gradle构建工具版本更改为v7.4.2
  • 将Kotlin插件版本更改为v1.8.10
  • 重构和废弃API替换

功能：

  • 添加波斯语语言支持 jhomlala/betterplayer#1250

River Player

River Player Logo

River Player 是基于 video_player 和 Chewie 的高级视频播放器。它解决了许多常见的用例，并且易于运行。

截图

截图1 截图2 截图3
截图4 截图5 截图6
截图7 截图8 截图9
截图10 截图11 截图12
截图13 截图14 截图15
截图16

简介

该插件基于 Chewie。Chewie 是一个很棒的插件，在很多情况下都能很好地工作。Better Player 继承了 Chewie 中引入的想法，并修复了常见的错误，增加了更多的配置选项并解决了典型用例。

功能：

  • 修复常见错误
  • 增加高级配置选项
  • 重构播放器控件
  • 支持播放列表
  • 支持在 ListView 中播放视频
  • 支持字幕（格式：SRT，WEBVTT，带有HTML标签支持；来自HLS的字幕；视频的多个字幕）
  • 支持HTTP头
  • 支持视频填充模式
  • 支持播放速度
  • 支持HLS（轨道，字幕（分段），音频轨道选择）
  • 支持DASH（轨道，字幕，音频轨道选择）
  • 支持替代分辨率
  • 支持缓存
  • 支持通知
  • 支持画中画
  • 支持DRM（令牌，Widevine，FairPlay EZDRM）。
  • 更多功能…

文档

重要信息

该插件正在开发中。每个版本都可能会有破坏性变更。该插件是部分时间免费开发的。如果您需要其他在pub dev上可用的播放器支持的功能，请随时创建PR。所有有价值的贡献都是受欢迎的！

示例代码

import 'package:better_player_example/pages/welcome_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Shortcuts(
      // 定义快捷键
      shortcuts: <LogicalKeySet, Intent>{
        LogicalKeySet(LogicalKeyboardKey.select): const ActivateIntent(),
      },
      child: MaterialApp(
        title: 'Better player demo',
        // 支持的语言
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
        ],
        supportedLocales: [
          const Locale('en', 'US'),
          const Locale('pl', 'PL'),
        ],
        // 主题
        theme: ThemeData(
          primarySwatch: Colors.green,
        ),
        // 首页
        home: WelcomePage(),
      ),
    );
  }
}

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

1 回复

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


当然，关于Flutter视频播放器插件 river_player_ff 的使用，下面是一个简单的代码示例，展示了如何在Flutter应用中集成和使用这个插件。

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

dependencies:
  flutter:
    sdk: flutter
  river_player_ff: ^最新版本号  # 请替换为实际的最新版本号

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

接下来，在你的 Dart 文件中，你可以按照以下步骤来使用 river_player_ff 插件：

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

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

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

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

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

  @override
  void initState() {
    super.initState();
    // 初始化控制器并设置视频URL
    _controller = RiverPlayerController()
      ..setDataSource('https://www.example.com/your-video-file.mp4')  // 替换为你的视频URL
      ..initialize();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('River Player FF Demo'),
      ),
      body: Center(
        child: _controller.value.isInitialized
            ? AspectRatio(
                aspectRatio: _controller.value.aspectRatio,
                child: RiverPlayerView(_controller),
              )
            : Container(
                child: CircularProgressIndicator(),
              ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 控制播放/暂停
          setState(() {
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              _controller.play();
            }
          });
        },
        tooltip: 'Play/Pause',
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}

代码解释：

  1. 依赖导入：

    • 导入 flutter/material.dart 用于构建UI。
    • 导入 river_player_ff/river_player_ff.dart 用于视频播放器功能。

  2. 主应用：

    • MyApp 是应用的根组件，定义了应用的主题和主页。

  3. 视频播放器页面：

    • VideoPlayerScreen 是一个有状态的组件，用于管理视频播放器的状态。
    • 在 initState 方法中，初始化 RiverPlayerController 并设置视频源URL。
    • 在 dispose 方法中，释放控制器资源。

  4. UI构建：

    • 使用 AspectRatio 保持视频的宽高比。
    • 在视频未初始化时显示一个加载指示器。
    • 使用 FloatingActionButton 控制视频的播放和暂停，并根据当前播放状态更新按钮图标。

请确保将 'https://www.example.com/your-video-file.mp4' 替换为有效的视频URL。

这个示例展示了基本的视频播放器功能，你可以根据需要进一步扩展，比如添加全屏功能、音量控制、进度条等。

回到顶部