Flutter视频播放增强插件better_player_enhanced的使用

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

Flutter视频播放增强插件better_player_enhanced的使用

Better Player (Fixed Version)

pub package GitHub license platform

这是一个原版 Better Player 包的修复版本,因为原开发者目前处于不活跃状态。该包解决了诸如过时的Flutter函数等问题以及其他维护更新。

原作者

更新内容

  • 替换了已弃用的hashValuesObject.hash(Flutter 3.27.0)。
  • 维护了所有原有功能。

这个包是原始Better Player包的增强版本,但所有荣誉归于原作者创建的基础包。

如果你愿意贡献代码,并且原包再次活跃,请随时参与!

功能介绍

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

特性:

  • ✔️ 修复常见错误
  • ✔️ 添加高级配置选项
  • ✔️ 重构播放器控件
  • ✔️ 播放列表支持
  • ✔️ 列表视图中的视频支持
  • ✔️ 字幕支持(格式:SRT、WEBVTT带HTML标签支持;HLS字幕;多个字幕)
  • ✔️ HTTP Headers支持
  • ✔️ BoxFit支持
  • ✔️ 播放速度支持
  • ✔️ HLS支持(音轨、字幕(分段)、音频轨道选择)
  • ✔️ DASH支持(音轨、字幕、音频轨道选择)
  • ✔️ 备选分辨率支持
  • ✔️ 缓存支持
  • ✔️ 通知支持
  • ✔️ 画中画支持
  • ✔️ DRM支持(令牌、Widevine、FairPlay EZDRM)
  • ✔️ 等等…

文档

重要信息

此插件开发正在进行中。您可能会在每个版本中遇到破坏性更改。此插件由开发者业余时间免费开发。如果您需要其他支持的功能,可以自由创建PR。所有有价值的贡献都欢迎!

示例代码

以下是一个完整的示例demo,展示了如何使用better_player_enhanced插件来构建一个简单的视频播放应用。

示例代码

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

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

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

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

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

  @override
  void initState() {
    super.initState();
    BetterPlayerConfiguration betterPlayerConfiguration = BetterPlayerConfiguration(
      aspectRatio: 16 / 9,
      fit: BoxFit.contain,
    );

    BetterPlayerDataSource betterPlayerDataSource = BetterPlayerDataSource(
      BetterPlayerDataSourceType.network,
      "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
    );

    _betterPlayerController = BetterPlayerController(betterPlayerConfiguration);
    _betterPlayerController.setupDataSource(betterPlayerDataSource);
  }

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

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

运行效果

以上代码将展示一个简单的视频播放界面,您可以根据需要进行扩展和自定义。希望这段代码能帮助你快速上手并理解better_player_enhanced插件的使用方法。

如果有任何问题或需要进一步的帮助,请随时查阅官方文档或访问示例应用程序。


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

1 回复

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


当然,以下是如何在Flutter项目中集成和使用better_player_enhanced插件来进行视频播放增强的代码示例。better_player_enhanced是一个功能丰富的视频播放插件,支持多种高级功能,如全屏、画中画、字幕等。

1. 添加依赖

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

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

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

2. 导入插件

在你的Dart文件中导入better_player_enhanced插件:

import 'package:better_player_enhanced/better_player_enhanced.dart';

3. 初始化BetterPlayerEnhancedController

在需要播放视频的地方,初始化BetterPlayerEnhancedController

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: VideoPlayerScreen(),
    );
  }
}

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

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

  @override
  void initState() {
    super.initState();
    BetterPlayerDataSource dataSource = BetterPlayerDataSource.network(
      "https://www.example.com/path/to/your/video.mp4",
      betterPlayerDataSourceType: BetterPlayerDataSourceType.network,
    );

    _betterPlayerController = BetterPlayerEnhancedController(
      betterPlayerDataSource: dataSource,
      configuration: BetterPlayerConfiguration(
        aspectRatio: 16 / 9,
        autoPlay: true,
        controlsConfiguration: BetterPlayerControlsConfiguration(
          enableFullscreen: true,
          enablePictureInPicture: true,
          enableSubtitles: true,
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Better Player Enhanced Example'),
      ),
      body: Center(
        child: BetterPlayerEnhanced(
          controller: _betterPlayerController,
        ),
      ),
    );
  }

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

4. 运行应用

现在你可以运行你的Flutter应用,应该会看到一个包含视频播放器的界面。该播放器支持全屏、画中画和字幕等功能。

5. 高级配置

你可以根据需要进一步配置BetterPlayerConfigurationBetterPlayerControlsConfiguration。例如,如果你需要自定义字幕文件,可以这样做:

BetterPlayerSubtitle subtitle = BetterPlayerSubtitle.network(
  "https://www.example.com/path/to/your/subtitles.vtt",
  "en",  // 语言代码
  "English"  // 显示的语言名称
);

List<BetterPlayerSubtitle> subtitles = [subtitle];

_betterPlayerController = BetterPlayerEnhancedController(
  betterPlayerDataSource: dataSource,
  configuration: BetterPlayerConfiguration(
    aspectRatio: 16 / 9,
    autoPlay: true,
    controlsConfiguration: BetterPlayerControlsConfiguration(
      enableFullscreen: true,
      enablePictureInPicture: true,
      enableSubtitles: true,
      subtitlesList: subtitles,
    ),
  ),
);

这样,你就可以在播放器中看到加载的字幕了。

通过上面的步骤,你应该能够在Flutter项目中成功集成并使用better_player_enhanced插件来增强视频播放功能。如果你有更具体的需求或遇到问题,可以参考插件的官方文档或GitHub仓库。

回到顶部