Flutter视频播放插件better_player_updated的使用

Flutter视频播放插件better_player_updated的使用

Better Player #

pub package pub package pub package

基于video_player和Chewie的高级视频播放器。它解决了许多典型用例,并且易于运行。

简介 #

该插件基于Chewie。Chewie是一个非常棒的插件,在许多情况下工作得很好。Better Player是对Chewie引入的思想的延续。Better Player修复了常见的bug,增加了更多的配置选项,并解决了典型的用例。

特性:

  • ✔️ 修复了常见的bug
  • ✔️ 增加了高级配置选项
  • ✔️ 重构了播放器控件
  • ✔️ 支持播放列表
  • ✔️ 支持在ListView中播放视频
  • ✔️ 支持字幕:(格式:SRT、WEBVTT支持HTML标签;来自HLS的字幕;视频的多个字幕)
  • ✔️ 支持HTTP头
  • ✔️ 支持BoxFit视频
  • ✔️ 支持播放速度
  • ✔️ 支持HLS(轨道、字幕(也支持分段)、音频轨道选择)
  • ✔️ 支持DASH(轨道、字幕、音频轨道选择)
  • ✔️ 支持替代分辨率
  • ✔️ 支持缓存
  • ✔️ 支持通知
  • ✔️ 支持画中画
  • ✔️ 支持DRM(令牌、Widevine、FairPlay EZDRM)。
  • ✔️ 更多功能…

文档 #

重要信息 #

此插件仍在开发中。每个版本都可能会有破坏性更改。此插件是免费的兼职开发。如果您需要一些其他播放器在pub dev上支持的功能,则可以自由创建PR。所有有价值的贡献都是受欢迎的!


完整示例Demo

以下是使用better_player_updated插件的基本示例。

import 'package:better_player/better_player.dart'; // 导入better_player包
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Better Player Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Better Player Example'),
        ),
        body: Center(
          child: BetterPlayer.network( // 使用网络视频源
            "https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4", // 视频URL
            betterPlayerConfiguration: BetterPlayerConfiguration( // 配置播放器
              aspectRatio: 16 / 9, // 设置宽高比
              autoPlay: true, // 自动播放
            ),
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何使用better_player_updated插件来播放网络视频。你可以根据自己的需求调整配置项。

更多功能示例

以下是一个更复杂的示例,展示了如何使用播放列表和字幕:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Better Player Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Better Player Example'),
        ),
        body: Center(
          child: BetterPlayerPlaylist(
            betterPlayerConfigurations: [
              BetterPlayerConfiguration(
                aspectRatio: 16 / 9,
                autoPlay: true,
              ),
            ],
            betterPlayerDataSourceList: [
              BetterPlayerDataSource(
                BetterPlayerDataSourceType.network,
                "https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4",
                subtitles: "assets/subtitle.srt", // 字幕文件路径
              ),
              BetterPlayerDataSource(
                BetterPlayerDataSourceType.network,
                "https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4",
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


better_player 是一个功能强大的 Flutter 视频播放插件,基于 video_playerchewie 构建,提供了更丰富的功能和更好的用户体验。better_player_updatedbetter_player 的一个更新版本,通常包含了最新的修复和改进。

以下是使用 better_player_updated 的基本步骤:

1. 添加依赖

首先,你需要在 pubspec.yaml 文件中添加 better_player_updated 依赖:

dependencies:
  flutter:
    sdk: flutter
  better_player_updated: ^x.x.x  # 使用最新版本

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

2. 导入库

在你的 Dart 文件中导入 better_player_updated

import 'package:better_player_updated/better_player.dart';

3. 使用 BetterPlayer

你可以通过 BetterPlayer 组件来播放视频。以下是一个简单的示例:

import 'package:flutter/material.dart';
import 'package:better_player_updated/better_player.dart';

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

class _VideoPlayerScreenState extends State<VideoPlayerScreen> {
  late BetterPlayerController _betterPlayerController;

  [@override](/user/override)
  void initState() {
    super.initState();
    _initializePlayer();
  }

  void _initializePlayer() {
    BetterPlayerDataSource betterPlayerDataSource = BetterPlayerDataSource(
      BetterPlayerDataSourceType.network,
      "https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
    );

    _betterPlayerController = BetterPlayerController(
      BetterPlayerConfiguration(
        autoPlay: true,
        looping: true,
      ),
      betterPlayerDataSource: betterPlayerDataSource,
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Better Player Example'),
      ),
      body: Center(
        child: AspectRatio(
          aspectRatio: 16 / 9,
          child: BetterPlayer(
            controller: _betterPlayerController,
          ),
        ),
      ),
    );
  }

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

void main() {
  runApp(MaterialApp(
    home: VideoPlayerScreen(),
  ));
}

4. 配置 BetterPlayer

BetterPlayerConfiguration 允许你配置播放器的行为,例如自动播放、循环播放、全屏模式等。

BetterPlayerConfiguration(
  autoPlay: true,
  looping: true,
  fullScreenByDefault: false,
  controlsConfiguration: BetterPlayerControlsConfiguration(
    showControls: true,
    enableProgressText: true,
  ),
)

5. 处理数据源

BetterPlayerDataSource 用于指定视频的来源。你可以从网络、文件或资产中加载视频。

BetterPlayerDataSource(
  BetterPlayerDataSourceType.network,
  "https://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4",
);

6. 控制播放器

你可以通过 BetterPlayerController 来控制播放器的行为,例如播放、暂停、跳转等。

_betterPlayerController.play();
_betterPlayerController.pause();
_betterPlayerController.seekTo(Duration(seconds: 10));

7. 全屏模式

BetterPlayer 支持全屏模式。你可以通过点击播放器上的全屏按钮或手动调用 _betterPlayerController.enterFullScreen() 来进入全屏模式。

8. 处理事件

你可以监听播放器的事件,例如播放完成、播放状态变化等。

_betterPlayerController.addEventsListener((event) {
  if (event.betterPlayerEventType == BetterPlayerEventType.finished) {
    print("Video finished playing");
  }
});

9. 释放资源

在页面销毁时,记得释放播放器资源:

[@override](/user/override)
void dispose() {
  _betterPlayerController.dispose();
  super.dispose();
}
回到顶部